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

【问题标题】：in Jquery why it won't alert each one in while loop?在 Jquery 中，为什么它不会在 while 循环中提醒每个人？
【发布时间】：2013-08-27 15:08:59
【问题描述】：

<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。我如何解决它？谢谢

【问题讨论】：

标签： javascript jquery while-loop alert

【解决方案1】：

您提醒的是计数器的当前值，而不是<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

【讨论】：

谢谢，效果很好。但是为什么 alert 中的 counter(boxNumber) 和 $('#div'+boxNumber) 中的 counter(boxNumber) 不同？并且它们都在while循环中。
您实际上并没有将该值绑定到 DIV 的点击。

【解决方案2】：

页面加载后，您将 boxNumber 增加到 4 - 这是故意的吗？详情请参阅this jsFiddle。

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：