Question

此循环似乎无法正常工作，我不确定我要去哪里出错，但会感谢您的帮助。

var j = 0;
for (j = 0; j < 10; j++) {
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

基本上，只要单击该按钮，它就应该提醒出循环所要达到的数字（对吗？），但它只提醒每一个“ 10”？

已经很晚了，我知道我一定做错了什么，但我不知道该怎么做。

这是我循环的小提琴： https://jsfiddle.net/p8v5sejr/

Answer 1

这是因为循环运行，然后单击按钮时，j等于10。由于您的值来自按钮的ID，因此您可以利用它来发挥自己的优势：

var j = 0;
for (j = 0; j < 10; j++) {
  $('#btn-' + j).click(function() {
    alert($(this).attr("id").split("btn-")[1]);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

Answer 2

您可以从当前目标元素中获取id并解析出索引。

for (let index = 0; index < 4; index++) {
  $('#btn-' + index).click(function(e) {
    var value = parseInt(e.target.id.replace(/[\D+]/g, ''), 10);
    alert(value);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

Answer 3

关于功能范围和块范围

只需使用let在for循环中声明i

// var j = 0; <-- Don't use var
for (let j = 0; j < 10; j++) { // <-- use let
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

Answer 4

如果在函数中进行事件绑定，则会得到一个保留值的闭包。

var j = 0;
for (j = 0; j < 10; j++) {
  addClick(j);
}

function addClick(j) {
  $('#btn-' + j).click(function() {
    alert(j);
  });
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<button id='btn-0'>One</button>
<button id='btn-1'>Two</button>
<button id='btn-2'>Three</button>
<button id='btn-3'>Four</button>

Answer 5

尝试一下

$( "button[id^=btn]" ).each(function(index) {
    $(this).on("click", function(){
        var idvalue = $(this).attr('id'); 

        //alert(index);
        //or
        idvalue = idvalue.replace("btn-","");
        alert(idvalue);
    });
});

在jQuery中循环按钮单击事件

5 个答案: