1

对不起，如果标题令人困惑，我想不出更好的东西。基本上，我想做的是直截了当。这是我的代码

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 号吗？

4

5 回答 5

4

您可以为按钮设置类名（例如"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();
});

演示：http: //jsfiddle.net/DXzKu/

于 2012-06-04T15:00:41.070 回答
1

以选择器开头的属性 ('^=) 将适用于您的 ID，如下所示：

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

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

于 2012-06-04T15:02:00.847 回答
0

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

jQUery('#button1, #button2, #button3')...
于 2012-06-04T14:59:05.440 回答
0 
for (var i=1; i<=3; i++) {
   $('.button'+i).click(function() {
      $(".box"+i).slideUp();
      $(this).remove();
   });
}
于 2012-06-04T14:59:13.783 回答
0

尝试如下，

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

但是通过一些标记更改，我们可以做得更好。

于 2012-06-04T15:02:03.243 回答