如何將Javascript事件綁定到動態類

Question

當該類的任何成員具有鼠標懸停時，我需要為該類的所有成員生成背景顏色更改。

這是JavaScript：

var array = ['abc','def','abc','xyz'];
var row;
var cell = [];
var rowClass = [];

for (var i = 0; i < array.length; i++){
    // Insert an empty <tr> element
    row = document.getElementById("myTable").insertRow(i+1);

    // Insert cells <td></td>
    for(var j = 0; j < 2; j++){
        cell[j] = row.insertCell(j);
    };

    // fill cells <td></td>
    cell[0].innerHTML = 'row ' + i;
    cell[1].innerHTML = array[i];
    cell[1].setAttribute("class", array[i]);
}
var k0 = 0;
rowClass[k0] = '.' + array[k0];
$(document).on('mouseover', rowClass[k0] ,function() {$(rowClass[k0]).css("background-color", "yellow");});
$(document).on('mouseout', rowClass[k0] ,function() {$(rowClass[k0]).css("background-color", "");});

var k1 = 1;
rowClass[k1] = '.' + array[k1]; 
$(document).on('mouseover', rowClass[k1] ,function() {$(rowClass[k1]).css("background-color", "yellow");});
$(document).on('mouseout', rowClass[k1] ,function() {$(rowClass[k1]).css("background-color", "");});

var k2 = 2;
rowClass[k2] = '.' + array[k2];
$(document).on('mouseover', rowClass[k2] ,function() {$(rowClass[k2]).css("background-color", "yellow");});
$(document).on('mouseout', rowClass[k2] ,function() {$(rowClass[k2]).css("background-color", "");});

var k3 = 3;
rowClass[k3] = '.' + array[k3];
$(document).on('mouseover', rowClass[k3] ,function() {$(rowClass[k3]).css("background-color", "yellow");});
$(document).on('mouseout', rowClass[k3] ,function() {$(rowClass[k3]).css("background-color", "");});

這是一個JSfiddle 。

如何用適當的代碼替換四個顯式的“ on”語句hack？ 在嘗試了循環並在Stack Overflow上提出了各種答案之后，這是我能做到的最好的方法。

Answer 1

如何用適當的代碼替換四個顯式的“ on”語句hack？ 嘗試循環后...

您可以使用懸停事件來代替mouseover和mouseout 。 之所以可能無法在循環中為您工作，是因為您試圖在事件回調中使用索引i 。 這是一個證明問題的小提琴 。

我認為這是一種編寫代碼的更簡潔的方法。 解釋內含注釋。

 jQuery(function($) { var table = $('#myTable'), classes = ['abc', 'def', 'abc', 'xyz']; $.each(classes, function(index, class_name) { // create a table row and append 2 table cells to it var tr = $('<tr>').append([ $('<td>', { 'text': 'row ' + index }), $('<td>', { 'text': class_name, 'class': class_name }).hover( // replaces mouseover hoverEffect('yellow', class_name), // replaces mouseout hoverEffect('inherit', class_name) ) ]); table.append(tr); }); function hoverEffect(color, class_name) { // a function must be returned for the hover effect to work return function() { // this function closes over color and class_name $('.' + class_name).css('background-color', color); }; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <table id="myTable" width="100" cellpadding="3" border="1"> <tr> <td>column1</td> <td>column2</td> </tr> </table>