[英]Generating a Javascript id in a loop
以下是日期選擇器的代碼。 當我們在from字段中選擇一個日期時,“ to”字段中“ from”字段下方的所有日期都將被阻止。 我想在for循環的幫助下生成這些id,但是當我運行此代碼時,文本框僅顯示具有“ from”和“ to”適當功能的日期選擇器。
$(function () {
var frm = 0;
var tu = 0;
var i = 0;
for (i = 1; i <= 5; i++) {
frm = "#from" + i;
tu = "#to" + i;
$(frm).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd',
maxDate: '-1',
onSelect: function (selected) {
$(tu).datepicker("option", "minDate", selected)
}
});
$(tu).datepicker({
dateFormat: 'yy/mm/dd',
changeMonth: true,
changeYear: true,
maxDate: '-1',
onSelect: function (selected) {
$(frm).datepicker("option", "maxDate", selected)
}
});
}
});
html是由php為($ a = 1; $ a <= $ i; $ a ++)生成的{
echo("
<li>
<input type=\"text\" name=\"course_name$a\" class=\"jq_watermark required\" placeholder=\"Course Name\" title=\"$x Certified Course Name\" style=\"width:11.6em;\">
<tab></tab>
<input type=\"text\" name=\"course_institute$a\" class=\"jq_watermark required\" placeholder=\"Institute Name\" title=\"$x Institute Name\" style=\"width:11.6em;\">
<tab></tab>
<br />
<input type=\"text\" id=\"from$a\" name=\"course_start_date$a\" class=\"required\" placeholder=\"Certified Course Start Date\" title=\"$x Certified Course Start Date\" style=\"width:11.6em;\" readonly=\"readonly\">
  to 
<input type=\"text\" id=\"to$a\" name=\"course_end_date$a\" class=\"required\" placeholder=\"Certified Course End Date\" title=\"$x Certified Course End Date\" style=\"width:11.6em;\">
<br />
<input type=\"text\" name=\"course_city$a\" class=\"required\" placeholder=\"City\" title=\"$x Training Institute City Name!\" style=\"width:11.6em;\">
<tab></tab>
<input type=\"text\" name=\"course_country$a\" class=\" required\" placeholder=\"Country\" title=\"$x Training Institute Country Name!\" style=\"width:11.6em;\">
<tab></tab>
<button title=\"Your Training Certificate Scanned Picture, Please!\">Upload Training Certificate</button>
</li>
");
}
由於您的匿名函數創建的閉包你總是有相同的frm
/ tu
(應該是to
BTW)變量。 通過引入一個將這些變量作為參數接收的自調用匿名函數,您可以創建新變量來避免此問題:
$(function () {
var frm = 0;
var tu = 0;
var i = 0;
for (i = 1; i <= 5; i++) {
frm = "#from" + i;
tu = "#to" + i;
(function (frm, tu) {
$(frm).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd',
maxDate: '-1',
onSelect: function (selected) {
$(tu).datepicker("option", "minDate", selected)
}
});
$(tu).datepicker({
dateFormat: 'yy/mm/dd',
changeMonth: true,
changeYear: true,
maxDate: '-1',
onSelect: function (selected) {
$(frm).datepicker("option", "maxDate", selected)
}
});
})(frm, tu);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.