我是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--;
})
});
答案 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
... ... ...
我希望它能奏效。 感谢。