Question

很抱歉，如果标题令人困惑，我想不出更好的事情。基本上，我想做的就是直截了当。这是我的代码

jQUery('.button1').click(function() {
    jQuery(".box1").slideUp();
    jQuery(this).remove();
});
jQUery('.button2').click(function() {
    jQuery(".box2").slideUp();
    jQuery(this).remove();
});
jQUery('.button3').click(function() {
    jQuery(".box3").slideUp();
    jQuery(this).remove();
});

等...... 现在，当我有更多的盒子时，这几乎是一团糟。有什么方法可以将它们全部组合起来让jquery做ID号吗？

Answer 1

您可以为按钮设置类名（例如"buttons"）并使用ID：

<button id="button1" class="buttons">Delete</button>

然后，您可以制作一些技巧来获取ID中的数字：

$(".buttons").on("click", function() {
    var n = this.id.replace("button", "");
    $(".box" + n).slideUp();
    $(this).remove();
});

DEMO： http://jsfiddle.net/DXzKu/

Answer 2

属性starts-with selector（'^ =）将适用于您的ID，如下所示：

$('[class^="button"]').click(function() {
  //do stuff
});

您可以从点击的元素中获取数字并显示/隐藏该框。

Answer 3

您可以将它们组合在一个选择器中：

jQUery('#button1, #button2, #button3')...

Answer 4

for (var i=1; i<=3; i++) {
   $('.button'+i).click(function() {
      $(".box"+i).slideUp();
      $(this).remove();
   });
}

Answer 5

尝试如下，

for (var i = 1; i <= 3; i++) {
   jQUery('.button'+i).click({ i: i }, function(e) {
     jQuery(".box"+ e.data.i).slideUp();
     jQuery(this).remove();
   });
}

但是随着一些标记的改变，我们可以做得更好。

如何组合具有连续ID的元素的函数

5 个答案: