giá trị Passing để onclick

Question

Nếu tôi tạo ra rất nhiều toàn bộ các phần tử HTML sử dụng một vòng lặp, như

for (i= 1; i < 100; i++) { 
    var my_element = document.createElement ("td"); 
    row.appendChild (my_element); 
    my_element.onclick = function() {my_function (i)); 
} 

sau đó khi các phần tử được nhấp, giá trị của tôi truyền cho my_function luôn là 100, bất kể những gì số yếu tố đang gọi nó. Tôi đã làm việc này bằng cách sử dụng

my_element.id = "something"+i; 
my_element.onclick = function (e) {my_function (e.target.id)}; 

(Đối với Internet Explorer, target cần phải được srcElement, rõ ràng.) Tôi tò mò muốn biết liệu có cách nào để tạo ra các chức năng mà không cần phải thêm ID để phần tử như thế này

Answer 1

Giá trị của i thay đổi với mỗi lần lặp của vòng lặp. You need a closure to capture the value of i:

(function(i) { 
    my_element.onclick = function() {my_function (i)}; 
}(i)) 

Answer 2

nếu tôi là bạn tôi sẽ sử dụng Jquery (hoặc mẫu thử nghiệm hoặc bất cứ điều gì js khuôn khổ mà có sẵn)

trên mỗi yếu tố bạn nên thêm các thuộc tính như myid ví dụ để khi bạn đã vào nhấp chuột bạn có thể truy xuất nó.

for(i=1; i ++ ; i<100){ 
    var myelement = "<td myid='something"+i+"' class='myTD'></td>" ; 
    row.append(myelement); 
} 

.... 

$(document).ready(function(){ 
    $('.myTD').click(function(){ 
    var id = $(this).attr('myid'); 
    my_function(id); 
    }); 

}); 

tôi đã làm thủ thuật này trên ứng dụng web của tôi :)

Answer 3

Nếu bạn viết một hàm trong đó xây dựng bạn một chức năng xử lý, bạn có thể sử dụng phạm vi mới mà cung cấp cho bạn để đảm bảo rằng bạn nhận được số bạn muốn. Ví dụ:

function BuildHandler (i) { return function() { alert(i); }; 

for (i= 1; i < 100; i++) { 
    var my_element = document.createElement ("td"); 
    row.appendChild (my_element); 
    my_element.onclick = BuildHandler(i); 
}