我有一个while循环在我的php页面设置了一个不同的id为每个按钮和表单通过计数器变量。每个按钮必须打开一个不同的表单(它们每个都有不同的默认信息预选,这是为了处方续订能力)。我可以通过在我的javascript中为每个id调用正确表单上的show的单击函数来实现这一点。但是,很明显,这是不可扩展的,所以它不能适应我的处方数量。通过网络,我看到人们使用类,id以解决这个问题的方法开始。然而,当我使用这个解决方案时,按钮打开了所有的表单…不是期望的行为。目前我的javascript函数如下:
$('[id^="add-renew-link"]').click(function () {
$('[id^="add-renew-form"]').show();
});
就像上面提到的,这个函数被所有不同的id按钮调用。但是,每次单击其中一个按钮时,该代码都会打开所有表单。id实际上是add-renew-form0, add-renew-form1, add-renew-form2…(add-renew-link的模式相同)。表单和链接的末尾有相同的数字,意味着要链接。有人知道我该怎么做吗?非常感谢!!
不能有多个具有相同ID的DOM元素。你可以在这里为元素分配类:
<div class="add-renew-link"></div> <div class="add-renew-form"></div>
然后使用.each
$('.add-renew-link').each( function(x){
$(this).click(function(){
$(".add-renew-form:eq("+x+")").show();
});
});
你可以在这里查看JSFiddle
你很接近了。$('[id^="add-renew-form"]').show();
将匹配所有以w/"add-renew-form"开头的元素作为id,所以这就是为什么当你点击任何链接/按钮时,你会看到所有的表单。
您可以使用正则表达式从id的末尾提取数字,以便在相关表单上查找匹配,如下所示:
$('a[id^="add-renew-link"]').click(function() {
var idx = $(this).attr("id").match(/'d+$/)[0]; // Pull index number from id
$("#add-renew-form" + idx).show();
});
这个jsbin有一个完整的工作示例。
http://jsbin.com/xicuwi/1/edit尝试使用.each()
方法:
$('[id^="add-renew-link"]').each(function(i){
var ths = $(this);
(function(i){
ths.click(function(){
$('#add-renew-form'+i).show();
}
})(i);
});