2016-04-25 5 views
0

Ich bin neu in PHP & jQuery und ich baute ein Repeater-Feld für meine Wordpress-Website, aber ich werde überspringen, wie ich es baue. Im Moment versuche ich herauszufinden, wie man den letzten Schleifenzähler in der PHP-foreach-Schleife bekommt und diese letzte Zählerzahl als initialen Zählerwert für die jQuery-Variable anwendet. Ich bin mir nicht sicher, ob dies möglich ist, weil ich versuche, die serverseitigen Daten für die clientseitige Verarbeitung zu verwenden.Get PHP Last Loop Counter und gelten für jQuery Initial Counter Wert

Das ist alles für das Intro, hier ist jetzt mein Beispiel ist PHP Code: -

$x = -1; 
foreach ($something as $some){ 
    $x++; // Let say $some has total of 3, so $x will provide counter such as 0, 1 & 2 
} 

Und ich versuche den letzten PHP Zählerwert als jQuery Anfangszählerwert anzuwenden, so dass es weiterhin die Zahl: -

var x = *the last php counter which is 2*; 
var max = 20; 
if(x < max){ 
    x++; 
// The 'x' will continue the count as 3, 4, 5,... 
} 

ich habe vorher viele Methoden versucht, und es war zwecklos. Gerade jetzt denke ich, dass die Sache, die ich zuerst herausfinden muss, ist, wie man den PHP-Loop-Zähler außerhalb der Schleife abruft, schätze ich ... Aber während ich darüber nachdenke, wäre ich Ihnen wirklich dankbar, wenn Sie es wären Leute, die mir helfen können, weil ich neu in diesem Zeug bin.

EDIT: -

Es scheint, dass '<?php echo $x; ?>'; Verwendung für den Wert in meinem jQuery Anzeigen meine jQuery Ausführung macht überhaupt nicht funktionieren. Hier ist der vollständige HTML-PHP-Code und jQuery-Code mit '<?php echo $x; ?>'; eingefügt: -

HTML-PHP: -

<?php 
        $user_edu = unserialize(base64_decode($current_user->education)); 

        $x = -1; 
        foreach(rsort($user_edu,SORT_NUMERIC) as $edu); 
        foreach ($user_edu as $edu){ 
        $x++; 

        echo " 
        <div> 
         <div class='col-sm-6 col-sm-offset-3 col-xs-12 field-label-size' id='p-custom-color'> 
         School Name 
         </div> 
         <div class='col-sm-6 col-sm-offset-3 col-xs-12 form-group-2 p-custom'> 
          <input type='text' name='education[" . $x . "][school]' class='form-control field-custom' placeholder='Your School Name' value='" . $edu['school'] . "'/> 
         </div> 
         <div class='col-sm-6 col-sm-offset-3 col-xs-12 field-label-size' id='p-custom-color'> 
         Concentration 
         </div> 
         <div class='col-sm-6 col-sm-offset-3 col-xs-12 form-group-2 p-custom'> 
          <input type='text' name='education[" . $x . "][concentration]' class='form-control field-custom' placeholder='Your Course/Program Name' value='" . $edu['concentration'] . "'/> 
         </div> 
         <div class='col-sm-6 col-sm-offset-3 col-xs-12 field-label-size' id='p-custom-color'> 
         Period 
         </div> 
         <div class='col-sm-6 col-sm-offset-3 col-xs-12 field-label-size form-group-2 p-custom'> 
          <div class='field-spacing'> 
           <div class='col-sm-6 col-xs-6' id='col-padding-left'> 
            <select name='education[" . $x . "][start_year]' class='form-control field-custom'> 
             <option value='' disabled>Start Year</option> 
             <option value='" . $edu['start_year'] . "' selected>" . $edu['start_year'] . "</option> 
             <option value='2016'>2016</option> 
             <option value='2015'>2015</option> 
             <option value='2014'>2014</option> 
             <option value='2013'>2013</option> 
             <option value='2012'>2012</option> 
             <option value='2011'>2011</option> 
             <option value='2010'>2010</option> 
             <option value='2009'>2009</option> 
             <option value='2008'>2008</option> 
             <option value='2007'>2007</option> 
             <option value='2006'>2006</option> 
             <option value='2005'>2005</option> 
             <option value='2004'>2004</option> 
             <option value='2003'>2003</option> 
             <option value='2002'>2002</option> 
             <option value='2001'>2001</option> 
             <option value='2000'>2000</option> 
             <option value='1999'>1999</option> 
             <option value='1998'>1998</option> 
             <option value='1997'>1997</option> 
             <option value='1996'>1996</option> 
             <option value='1995'>1995</option> 
             <option value='1994'>1994</option> 
             <option value='1993'>1993</option> 
             <option value='1992'>1992</option> 
             <option value='1991'>1991</option> 
             <option value='1990'>1990</option> 
             <option value='1989'>1989</option> 
             <option value='1988'>1988</option> 
             <option value='1987'>1987</option> 
             <option value='1986'>1986</option> 
             <option value='1985'>1985</option> 
             <option value='1984'>1984</option> 
             <option value='1983'>1983</option> 
             <option value='1982'>1982</option> 
             <option value='1981'>1981</option> 
             <option value='1980'>1980</option> 
             <option value='1979'>1979</option> 
             <option value='1978'>1978</option> 
             <option value='1977'>1977</option> 
             <option value='1976'>1976</option> 
             <option value='1975'>1975</option> 
             <option value='1974'>1974</option> 
             <option value='1973'>1973</option> 
             <option value='1972'>1972</option> 
             <option value='1971'>1971</option> 
             <option value='1970'>1970</option> 
             <option value='1969'>1969</option> 
             <option value='1968'>1968</option> 
             <option value='1967'>1967</option> 
             <option value='1966'>1966</option> 
             <option value='1965'>1965</option> 
             <option value='1964'>1964</option> 
             <option value='1963'>1963</option> 
             <option value='1962'>1962</option> 
             <option value='1961'>1961</option> 
             <option value='1960'>1960</option> 
             <option value='1959'>1959</option> 
             <option value='1958'>1958</option> 
             <option value='1957'>1957</option> 
             <option value='1956'>1956</option> 
             <option value='1955'>1955</option> 
             <option value='1954'>1954</option> 
             <option value='1953'>1953</option> 
             <option value='1952'>1952</option> 
             <option value='1951'>1951</option> 
             <option value='1950'>1950</option> 
             <option value='1949'>1949</option> 
             <option value='1948'>1948</option> 
             <option value='1947'>1947</option> 
            </select> 
           </div> 
           <div class='col-sm-6 col-xs-6' id='col-padding-right'> 
            <select name='education[" . $x . "][end_year]' class='form-control field-custom'> 
             <option value='' disabled>Start Year</option> 
             <option value='" . $edu['end_year'] . "' selected>" . $edu['end_year'] . "</option> 
             <option value='2015'>2015</option> 
             <option value='2014'>2014</option> 
             <option value='2013'>2013</option> 
             <option value='2012'>2012</option> 
             <option value='2011'>2011</option> 
             <option value='2010'>2010</option> 
             <option value='2009'>2009</option> 
             <option value='2008'>2008</option> 
             <option value='2007'>2007</option> 
             <option value='2006'>2006</option> 
             <option value='2005'>2005</option> 
             <option value='2004'>2004</option> 
             <option value='2003'>2003</option> 
             <option value='2002'>2002</option> 
             <option value='2001'>2001</option> 
             <option value='2000'>2000</option> 
             <option value='1999'>1999</option> 
             <option value='1998'>1998</option> 
             <option value='1997'>1997</option> 
             <option value='1996'>1996</option> 
             <option value='1995'>1995</option> 
             <option value='1994'>1994</option> 
             <option value='1993'>1993</option> 
             <option value='1992'>1992</option> 
             <option value='1991'>1991</option> 
             <option value='1990'>1990</option> 
             <option value='1989'>1989</option> 
             <option value='1988'>1988</option> 
             <option value='1987'>1987</option> 
             <option value='1986'>1986</option> 
             <option value='1985'>1985</option> 
             <option value='1984'>1984</option> 
             <option value='1983'>1983</option> 
             <option value='1982'>1982</option> 
             <option value='1981'>1981</option> 
             <option value='1980'>1980</option> 
             <option value='1979'>1979</option> 
             <option value='1978'>1978</option> 
             <option value='1977'>1977</option> 
             <option value='1976'>1976</option> 
             <option value='1975'>1975</option> 
             <option value='1974'>1974</option> 
             <option value='1973'>1973</option> 
             <option value='1972'>1972</option> 
             <option value='1971'>1971</option> 
             <option value='1970'>1970</option> 
             <option value='1969'>1969</option> 
             <option value='1968'>1968</option> 
             <option value='1967'>1967</option> 
             <option value='1966'>1966</option> 
             <option value='1965'>1965</option> 
             <option value='1964'>1964</option> 
             <option value='1963'>1963</option> 
             <option value='1962'>1962</option> 
             <option value='1961'>1961</option> 
             <option value='1960'>1960</option> 
             <option value='1959'>1959</option> 
             <option value='1958'>1958</option> 
             <option value='1957'>1957</option> 
             <option value='1956'>1956</option> 
             <option value='1955'>1955</option> 
             <option value='1954'>1954</option> 
             <option value='1953'>1953</option> 
             <option value='1952'>1952</option> 
             <option value='1951'>1951</option> 
             <option value='1950'>1950</option> 
             <option value='1949'>1949</option> 
             <option value='1948'>1948</option> 
             <option value='1947'>1947</option> 
            </select> 
           </div> 
          </div> 
         </div> 
         <div class='col-sm-6 col-sm-offset-3 col-xs-12 p-custom text-center remove_field'> 
          <button type='button' class='btn btn-block button-cont-custom'><span class='glyphicon glyphicon-chevron-up' id='glyphicon-menu-right-margin'></span> Remove Field</button> 
         </div> 
         <div class='col-sm-6 col-sm-offset-3 col-xs-12 text-center'> 
          <hr id='hr-field'/> 
         </div> 
        </div> 
        "; 
?> 
        <div class='repeater-edu'> 
         // The repeater will go here 
        </div> 
        <!----------------- Repeater Button -----------------> 
        <div class="col-sm-6 col-sm-offset-3 col-xs-12 text-center"> 
         <hr id="hr-field"/> 
        </div> 
        <div class="col-sm-6 col-sm-offset-3 col-xs-12 p-custom text-center"> 
         <button type="button" class="btn btn-block button-cont-custom add-field-edu"><span class="glyphicon glyphicon-plus" id="glyphicon-menu-right-margin"></span> Add More Field</button> 
        </div> // The jQuery execution call 

jQuery: -

$(document).ready(function(){ 
    $('.remove_field').click(function(){ 
     $(this).parent('div').remove(); 
    }) 
}); 

$(document).ready(function(){ 
    var max_fields  = 20; // Maximum input boxes allowed 
    var wrapper   = $(".repeater-edu"); // Fields wrapper 
    var add_field  = $(".add-field-edu"); // Add button ID 

    var x = '<?php echo $x; ?>'; // Initlal text box count 
    $(add_field).click(function(e){ // On add input button click 
     e.preventDefault(); // Preventing action from executed? 
     if(x < max_fields){ // Max input box allowed 
      x++; // Text box increment 
      $(wrapper).append('<div><div class="col-sm-6 col-sm-offset-3 col-xs-12 text-center"><hr id="hr-field"/></div><div class="col-sm-6 col-sm-offset-3 col-xs-12 field-label-size" id="p-custom-color">School Name</div><div class="col-sm-6 col-sm-offset-3 col-xs-12 form-group-2 p-custom"><input type="text" name="education["'+(x)+'"][school]" class="form-control field-custom" placeholder="Your School Name"/></div><div class="col-sm-6 col-sm-offset-3 col-xs-12 field-label-size" id="p-custom-color">Concentration</div><div class="col-sm-6 col-sm-offset-3 col-xs-12 form-group-2 p-custom"><input type="text" name="education["'+(x)+'"][concentration]" class="form-control field-custom" placeholder="Your Course/Program Name"/></div><div class="col-sm-6 col-sm-offset-3 col-xs-12 field-label-size" id="p-custom-color">Period</div><div class="col-sm-6 col-sm-offset-3 col-xs-12 field-label-size form-group-2 p-custom"><div class="field-spacing"><div class="col-sm-6 col-xs-6" id="col-padding-left"><select name="education["'+(x)+'"][start_year]" class="form-control field-custom"><option value="" disabled selected>Start Year</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option></select></div><div class="col-sm-6 col-xs-6" id="col-padding-right"><select name="education["'+(x)+'"][end_year]" class="form-control field-custom"><option value="" disabled selected>End Year</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option></select></div></div></div><div class="col-sm-6 col-sm-offset-3 col-xs-12 p-custom text-center remove_field"><button type="button" class="btn btn-block button-cont-custom"><span class="glyphicon glyphicon-chevron-up" id="glyphicon-menu-right-margin"></span> Remove Field</button></div></div>'); // Add input box 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ // User click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 
+0

assign wie: var x = ‚ '; –

+0

Ich weiß nicht, warum Sie Ihren Loop-Counter mit -1 ausführen. aber normaler Zähler wird auf die Länge des Arrays laufen. So können Sie leicht herausfinden durch 'count ($ array)'; – urfusion

+0

@DharaParmar Nun, es gibt tatsächlich ein Problem damit, die .click() - Funktion, die den obigen jQuery-Code auslöst, scheint überhaupt nicht fehlerfrei zu funktionieren. Gibt es etwas, was ich tun sollte, bevor ich diese anwende? – Kaydarin

Antwort

0

Sie können ein verborgenes Element DOM hinzufügen und den Wert zuweisen von $x zu ihm. Dann können Sie in jQuery den Wert aus dem versteckten Element übernehmen.

Beispiel

In PHP:

... ... 
... ... 
Your PHP code upto "repeater-edu" 
... ... 

<input type="hidden" name="last_counter_of_loop" id="last_counter_of_loop" value="<?php echo $x; ?>"/> 
<div class='repeater-edu'> 
... ... ... 
... ... ... 

Dann in Ihrem JQuery-Code:

var x = $("#last_counter_of_loop").val() 
... ... ... 
rest of your code 
... ... ... 

Ich hoffe, es wird funktionieren. Danke.

+0

gezeigt, das funktioniert! Ich dachte nie an diese Art von Hack ... Aber ich frage mich, könnten Sie erklären, warum das normale ' funktioniert nicht? Es verwirrt mich ... – Kaydarin

+0

Ich bin nicht wirklich sicher von Ihrem Code, warum das nicht funktioniert. Es kann aus vielen Gründen tatsächlich so weit geschehen, wie ich es verstehe. Voraussagen eines von ihnen wird nicht richtig sein. –

+0

aber von der Struktur dort sollte es kein Problem sein, oder? Ich frage mich ... – Kaydarin

1

Sie können diese wie

einfach tun
$x = -1; 
foreach ($something as $some){ 
    $x++; 
} 

und dann können Sie den Wert von $ x in Ihrem Javascript cod zuweisen e wie dieses

var x = '<?php echo $x; ?>'; 
var max = 20; 
if(x < max){ 
    x++; 
// The 'x' will continue the count as 3, 4, 5,... 
} 
+0

Nun, es gibt tatsächlich ein Problem mit diesem, die .click() - Funktion, die den obigen jQuery-Code auslöst, scheint überhaupt nicht zu funktionieren. Fehle ich hier etwas? – Kaydarin

0

take Click-Ereignis als:

$(document).on("click",".add-field-edu",function(e){ 

... 

}); 
+0

Ich denke, ich brauche Sie genauer zu sein, weil es immer noch nicht funktioniert. Entschuldige, dass ich langsam bin. – Kaydarin

0

Mehr einfache Weise <?php $x=count($something)-1;

<script> $(<you DOM object>).ready(function(){ var x = '<?php echo $x; ?>'; var max = 20; if(x < max){ x++; } }) </script> ?>

+0

Dies ist eine Art Inline-jQuery-PHP-Skript, das meine Codes durcheinander bringt. Ich würde ein externes Skript für mein Projekt bevorzugen. – Kaydarin

+0

@Kaydarin können Sie den Code trennen und es in verschiedenen Datei setzen, wie pro Sie geeignet Ich habe Sie nur den Code –