for循環中增加的數字沒有上升

我想弄明白這一點。我在我的HTML中有3個按鈕id（test1，test2，test3）！在我的jQuery我有一個的點擊功能的for循環是這樣的：for循環中增加的數字沒有上升

$(document).ready(function() { 
    for (var i = 0; i < 3; i++) { 
     $("#test"+i).on('click', function() { 
      alert("I am clicked! ("+i+")"); 
     }); 
    } 
});

現在，我提醒消息爲他們每個人，螺母所有的（我）在警報被賦予最後一個數字「3 「...如果我按test1，如果按test2和test3，我怎樣才能寫出」我被點擊（1）「？

I have a jsfiddle to explain here.

希望能幫助和在此先感謝;-)

來源

2013-07-13 Mansa

嘗試是這樣的

$(document).ready(function() { 
for (var i = 0; i < 3; i++) { 
    $("#test"+i).on('click', function() { 
     var value = $(this).attr('id'); 
      value=value.replace("test", ""); 
      value=parseInt(value)+1; 
     alert("I am clicked! ("+value+")"); 
    }); 
} 
});

來源

2013-07-13 10:13:56 srini

誰在給減去給我的代碼錯在哪 – srini

其實...這兩種解決方案都是偉大的，雖然這個工作與我的最佳解決方案; - ） – Mansa

的問題是，你分配處理器有一個持久參考到i變量，而不是一個副本該函數創建時的變量。他們關閉變量（和其他東西）i。更多：Closures are not complicated

有幾種方法可以解決這個問題。

你可以把一條信息上的元素，使他們可以共享一個單一處理，這可能是首選。（實際上，你已經在你的榜樣的信息，我們可以從元素的id值弄清楚i，但我在現實世界中假設的事情更復雜。）
```
$(document).ready(function() { 
    for (var i = 0; i < 3; i++) { 
     $("#test"+i).attr("data-index", i).click(clickHandler); 
    } 

    function clickHandler() { 
     alert("I am clicked! ("+this.getAttribute("data-index")+")"); 
     // Or: 
     alert("I am clicked! ("+$(this).attr("data-index")+")"); 
    } 
}); 
```
Updated Fiddle

請注意，我們只需一個處理程序函數，並處理對所有元素的點擊。

使用單一的處理器可能也意味着你可以利用事件代表團的，祖先元素掛鉤click而不是在每個單獨的元素，例如：
```
$("selector for ancestor").on("click", "[id^=test]", ...); 
```
Updated Fiddle

您可以使用構建器函數來創建點擊處理程序，以便它們關閉不會改變的內容（我們傳遞給構建器的參數）：

$(document).ready(function() { 
    for (var i = 0; i < 3; i++) { 
     $("#test"+i).on('click', buildHandler(i)); 
    } 

    function buildHandler(index) { 
     return function() { 
      alert("I am clicked! ("+index+")"); 
     }; 
    } 
});

Updated Fiddle

來源

2013-07-13 10:10:32

for循環中增加的數字沒有上升

回答

相關問題