javascript - 在 Jquery 中，为什么它不会在 while 循环中提醒每个人？

Question

<body>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <script>
    $(document).ready(function(){
        var boxNumber=1;
        while(boxNumber<=3){
            $('#div'+boxNumber).click(function(){
                alert(boxNumber);
            });
            boxNumber++;
        }
    });
    </script>
</body>

我希望代码在我单击它时提醒它的框号，但它却提醒了数字 4。我如何解决它？谢谢

score 1 · Accepted Answer

页面加载后，您将 boxNumber 增加到 4 - 这是故意的吗？请参阅此 jsFiddle进行说明。

$(document).ready(function () {
    var boxNumber = 1;
    while (boxNumber <= 3) {
        $('#div' + boxNumber).click(function () {
            alert($(this).text());
        });
        boxNumber++;
        alert(boxNumber);
    }
    alert(boxNumber);
});

score 1 · Accepted Answer

您正在提醒计数器的当前值，而不是<div>.

这将按照您的预期工作：

<body>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <script>
    $(document).ready(function(){
        var boxNumber=1;
        while(boxNumber<=3){
            $('#div'+boxNumber).click(function(){
                alert($(this).text());
            });
            boxNumber++;
        }
    });
    </script>
</body>

JSFiddle

score 0 · Accepted Answer

按照@john 的回答，您也可以这样做，这更简单

 var boxNumber=1;
    while(boxNumber<=3){

function addClick(num) {    
    $("#div" + boxNumber).click (
        function() { alert (num) }
    )
}
addClick(boxNumber);
boxNumber++;
}

javascript - 在 Jquery 中，为什么它不会在 while 循环中提醒每个人？

3 回答 3

Related

Reference