帶連接的JavaScript中的while循環

Question

我試圖在我的Javascript中進行while循環。

到目前為止，我已經知道了：

<script>
    $(document).ready(function(){       
        var i=0;
        while (i<9999) {
            $(".add_new_item_field" + i).hide();    
        $(".add_new_item_button" + i).click(function(){
            $(".add_new_item_field" + i).slideToggle("slow");
        });
        i++;
        }
    });
</script>

目標是使這項工作：

<div class="add_new_item_button1"></div>
<div class="add_new_item_button2"></div>
<div class="add_new_item_button3"></div>
...
<div class="add_new_item_field1">Show me something</div>
<div class="add_new_item_field2">Show me something</div>
<div class="add_new_item_field3">Show me something</div>
...

但是由於某種原因，它不起作用。 我在這里想念什么嗎？

Answer 1

我猜想i不是您期望的處理程序中的內容，因為執行處理程序時i已經達到了9999。要解決此問題，您需要將變量帶入處理程序閉包中，例如：

var i=0;
while (i<9999) {
    $(".add_new_item_field" + i).hide();  
    $(".add_new_item_button" + i).click((function(i) {
        // i is now saved in this closure
        return function() {
            $(".add_new_item_field" + i).slideToggle("slow");
        };
    }(i)));
    i++;
}

旁注：我不太確定這是否是解決您實際任務的最佳方法，但循環和附加9999事件處理程序似乎是不必要的...

Answer 2

您的問題是$(".add_new_item_field" + i).slideToggle("slow");行中的串聯 單擊div之一時發生。 但是，設置處理程序的循環是在很久以前運行的，而i的值已經是9999 。 如@David所示，請使用閉包來避免這種情況。

但是，我認為這是錯誤的方法。 設置10000個單擊處理程序並執行20000個jQuery選擇，確實會使您的頁面非常非常慢。 對按鈕使用一種通用類，對字段使用一種通用類。 如果您不能依賴特定的文檔順序，請給它們提供唯一的ID以相互引用-而不是類。

然后用一行CSS隱藏所有字段，並使用事件委托為按鈕觸發1個單個函數，該函數從附加到所單擊按鈕的數據中通過id查找該字段。

<style>
    .add_new_item_field { display:none; }
</style>
<!-- placing the stylesheet here also avoids flickering.
Even better would be of course if it was written dynamically by JS, for not 
hiding the fields in clients that do not support JavaScript -->
<script src=/"jquery.js"></script>
<script>
jQuery(function($) {
    $(document).on("click", ".add_new_item_button", function(e) {
        var id = "field"+$(this).data("field");
        $('#'+id).show();
    });
});
</script>
<div class="add_new_item_button" data-field="1"></div>
<div class="add_new_item_button" data-field="2"></div>
<div class="add_new_item_button" data-field="3"></div>
...
<div class="add_new_item_field" id="field1">Show me something</div>
<div class="add_new_item_field" id="field2">Show me something</div>
<div class="add_new_item_field" id="field3">Show me something</div>
...

Answer 3

我認為您使用的是錯誤的方法。 您可以將單擊處理程序分配給同一類的所有對象。 但是，您試圖將類說明符用作ID，並試圖將處理程序分配給每個單獨的對象。 您不會對鏈接/ URL的行為和布局做同樣的事情嗎？ （鏈接）會嗎？

閱讀以下內容： jQuery：如何將單擊處理程序添加到類中並找出單擊了哪個元素？

您要為一個類設置處理程序，將divs指定為該類。 我沒有濫用類說明符作為某種ID。

Answer 4

您正在點擊處理程序中創建一個閉包，該閉包捕獲了i變量，而不是它的值。 這意味着所有單擊函數將包含值9999，該值在while循環結束時為變量的值。

您可以通過創建設置點擊處理程序的函數來修復它。

var setClick = function(index) {
   $(".add_new_item_button" + index).click(function(){
   $(".add_new_item_field" + index).slideToggle("slow");
   }
}

並在while循環中使用它。

while (i<9999) {
    $(".add_new_item_field" + i).hide();    
    setClick(i);
    i++;
    }

現在，您的點擊處理程序正確捕獲了i的值