javascript - 如何将 JavaScript 事件绑定(bind)到动态类

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

How do I replace the four explicit 'on' statements hack with the proper code? After trying loops ...

您可以使用悬停事件来代替 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>