sự kiện onClick trong vòng lặp For

Question

Tôi đã cố tạo một vòng lặp với giá trị for và tăng bởi sự kiện onclick nhưng nó không hoạt động.

Một phần của js:

var gameCase = ['', '', '', '', '', '', '', '', ''], // 9 
    itemLists = $('game').getElementsByTagName('li'); // 9 items 

    for(var i = 0; i < itemLists.length; i++) { 
     // i already egal to 9 
     itemLists[i].onclick = function() { 
       // do something 
     } 
    } 

Nhưng trong trường hợp này, Đối với vòng lặp đã được hoàn thành trước khi tôi đã có thể nhấp chuột vào một phần tử của danh sách.

Hơn nữa, tôi muốn nhận danh sách mặt hàng mà tôi đã nhấp và lưu nó trên một mảng. Tôi đã thử một gameCase [this] (trong chức năng onclick), nhưng tôi không biết đó có phải là cách hay hay không.

Answer 1

John Resig bao gồm chủ đề này rất tốt trong "Bí mật của Ninja JavaScript" (http://ejohn.org/apps/learn/#59)

Bạn sẽ cần phải tạo ra một phạm vi tạm thời để bảo tồn giá trị i của

for (var i = 0; i < itemLists.length; i++) (function(i){ 
    itemLists[i].onclick = function() { 
     // do something 
    } 
})(i); 

Edit:

var gameCase = ['', '', '', '', '', '', '', '', ''], // 9 
$listParent = $('game').find('ul'), // li's parent 
itemLists = $('game').getElementsByTagName('li'); // 9 items 

var listHandler = (function() { 
    var i = 0; 

    return function() { 
    // $(this) will in here refer to the clicked li 
    i++ // increment i 

    if (i === 9) { 
     $listParent.off('click', 'li', listHandler); //remove eventhandler when i reaches 9 
    } 
    } 
}()); 

$listParent.on('click', 'li', listHandler); // attach eventhandler to ul element 

Điều này sẽ làm những gì bạn muốn, không thể kiểm tra ngay bây giờ vì tôi đang làm việc.

Answer 2

Quấn người nghe của bạn:

onclick = (function(i) {return function() { 
    ... 
};})(i); 

này sửa chữa các vấn đề phạm vi biến của bạn.

Answer 3

Xin lỗi nếu tôi không hiểu câu hỏi của bạn đúng cách, Từ mã tôi hiểu rằng, bạn đang cố gắng thêm trình xử lý onclick vào tất cả các phần tử danh sách trong thẻ trò chơi (có lẽ nó phải là một lớp/id).

Vòng lặp for sẽ được thực thi khi thẻ/tệp tập lệnh tải mà không có bất kỳ tương tác người dùng nào.

Nếu bạn muốn chỉ định một hàm sử dụng giá trị hiện tại của bộ đếm. Sử dụng mã sau:

itemLists[i].onclick = (function() { 
    return function() { 
     // TODO --- 
     // Your handler code here 
} 
})();