获取PHP Last Loop Counter并应用于jQuery初始计数器值

时间:2016-04-25 05:32:50

标签: php jquery

我是PHP& jQuery和我正在为我的Wordpress网站构建一个转发器字段,但我将跳过我如何构建它。现在,我试图弄清楚如何在PHP foreach循环中获取最后一个循环计数器并将最后一个计数器数作为jQuery变量的初始计数器值应用。我不确定这是否可行,因为我要做的是使用服务器端数据进行客户端处理。

这是介绍的全部内容,现在这里是我的示例 PHP 代码: -

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

我正在尝试将最后一个PHP计数器值应用为 jQuery 初始计数器值,以便它继续计数: -

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,...
}

在此之前我一直在尝试很多方法,这是徒劳的。现在我觉得我首先需要弄清楚的是如何将PHP循环计数器检索到循环外部,我猜...但是当我想出来的时候,我真的会感谢你们,如果你们因为我不熟悉这些东西所以能帮助我的人。

修改: -

似乎使用'<?php echo $x; ?>';在我的jQuery中显示值使得我的jQuery执行根本不起作用。 这里插入了'<?php echo $x; ?>';的完整HTML-PHP代码和jQuery代码: -

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--;
    })
});

4 个答案:

答案 0 :(得分:1)

你可以像

那样简单地做到这一点
$x = -1;
foreach ($something as $some){
   $x++; 
}

然后你可以在你的javascript代码中分配$ x的值,如下所示

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

答案 1 :(得分:0)

将点击事件视为:

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

...

});

答案 2 :(得分:0)

更简单的方法 <?php $x=count($something)-1;

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

答案 3 :(得分:0)

您可以向DOM添加隐藏元素,并为其指定$x的值。然后在jQuery中,您可以从隐藏元素中获取值。

示例

在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'>
... ... ...
... ... ...

然后在您的JQuery代码中:

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

我希望它能奏效。 感谢。