如何將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'語句破解？在堆棧溢出嘗試循環和各種答案後，這是我能做的最好的工作。

Answer 1

如何用正確的代碼替換四個明確的'on'語句破解？嘗試循環後...

您可以使用懸停事件，而不是mouseover & mouseout。它在循環中可能不適合你的原因是因爲你正在嘗試在事件回調中使用索引i。這是一個fiddle，演示了這個問題。

我認爲這是一種可以說是更乾淨的方式來編寫代碼。一個解釋與評論一脈相承。

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>