有一个按钮打开右边的表单JQuery


Have a button open the right form JQuery

我有一个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);
});