Question

假设有5个按钮。
当每个按钮点击时，它会显示按钮值的警告框。

例如，当我点击按钮2时，它会显示“你点击按钮2”的警告框; <当我单击按钮4时，它会显示“您单击按钮4”的警告框。

以下是传统方法：

<script>
$(function(){
    $("#b0").click(function(){
        alert("You click Button 0");
    });
    $("#b1").click(function(){
        alert("You click Button 1");
    });
    $("#b2").click(function(){
        alert("You click Button 2");
    });
    $("#b3").click(function(){
        alert("You click Button 3");
    });
    $("#b4").click(function(){
        alert("You click Button 4");
    });
});
</script>

<button id="b0">Button 0</button>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>

但它效率太低且不专业，所以我改变它如下：

<script>
$(function(){
    for(i=0;i<5;i++){
        $("#b"+i).click(function(){
            alert("You click Button "+i);
        });
    }
});
</script>

<button id="b0">Button 0</button>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>

更改后，它始终显示“您单击按钮5”。如何使用for循环解决此问题？

Answer 1

您总是触发变量i的值，在for循环之后，值将为5。因此，使用带参数i的自调用函数。

$(function() {
  for (i = 0; i < 5; i++) {
    (function(i) {
      $("#b" + i).click(function() {
        alert("You click Button " + i);
      });
    })(i);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="b0">Button 0</button>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>

或者在最新的浏览器中使用 let 作为块范围级别的局部变量值

$(function() {
  "use strict";
  for (let i = 0; i < 5; i++) {
    $("#b" + i).click(function() {
      alert("You click Button " + i);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="b0">Button 0</button>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>

或者您可以使用 index() 方法和attribute start selector

$(function() {
  var $sel = $('[id^=b]');
  $sel.click(function() {
    alert("You click Button " + $sel.index(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="b0">Button 0</button>
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>

Answer 2

或者，您可以使用jQuery属性选择器

  $("button[id^='b']" ).click(function(){
      alert("You click Button " + this.id.substring(1));
  });

如何使用for循环添加所有按钮的点击事件？

2 个答案: