Question

我的php页面中有一个while循环，它通过计数器变量为每个按钮和表单设置不同的id。每个按钮都必须打开一个不同的形式（它们每个都有预先选择的不同默认信息，这是为了处方更新能力）。我可以通过在我的javascript中为每个在正确表单上调用节目的id单击函数来实现此功能。但是，显然这是不可扩展的，所以它无法适应我的处方数量。通过网络浏览，我看到人们使用类，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的相同模式）形式。最后使用相同编号的表格和链接是相互关联的。有谁知道我怎么能做到这一点？非常感谢!!

Answer 1

您不能拥有多个具有相同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();
    });

});

You can check out the JSFiddle here

Answer 2

尝试使用.each()方法：

$('[id^="add-renew-link"]').each(function(i){
  var ths = $(this);
  (function(i){
    ths.click(function(){
      $('#add-renew-form'+i).show();
    }
  })(i);
});

Answer 3

你关闭了。 $('[id^="add-renew-form"]').show();将匹配所有开头w /＆＃34; add-renew-form＆＃34;作为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

有一个按钮打开正确的形式JQuery

3 个答案: