在jQuery中结合each()使用hover()方法失效问题排查

让我帮你排查这段jQuery代码无法正常工作的原因，主要有几个关键错误：

错误点分析 #

• 选择器不匹配：你的td类名是add-from-list_@j和remove-from-list_@j（带动态编号后缀），但初始选择器写的是.add-from-list和.remove-from-list，根本无法匹配到目标元素；另外.not(':first')的使用完全没必要，反而会跳过第一个元素的事件绑定。
• hover方法调用错误：jQuery的hover()方法需要接收两个回调函数（分别对应mouseenter和mouseleave事件），但你把这两个函数错误地放到了each()的参数中——each()仅需一个回调函数，你应该在each内部为每个元素绑定hover事件，并将两个回调传入hover()。
• 遗漏调用对象：在remove-from-list的hover回调中，css("background", "#fff2cc")前面缺少$(this)，相当于直接调用全局css函数，会导致语法错误。

修复后的代码（基础版） #

$(document).ready(function () {
    // 绑定add-from-list类td的hover事件
    $(".table.table-bordered.table-hover.dataTable td[class^='add-from-list_']").each(function () {
        $(this).hover(
            // 鼠标进入时的回调
            function () {
                $(this).css("background", "#fff2cc");
            },
            // 鼠标离开时的回调
            function () {
                $(this).css("background", "");
            }
        );
    });

    // 绑定remove-from-list类td的hover事件
    $(".table.table-bordered.table-hover.dataTable td[class^='remove-from-list_']").each(function () {
        $(this).hover(
            function () {
                $(this).css("background", "#fff2cc");
            },
            function () {
                $(this).css("background", "");
            }
        );
    });
});

更优雅的优化版本 #

实际上jQuery的事件绑定会自动遍历所有匹配元素，不需要手动调用each()，可以简化代码：

$(document).ready(function () {
    // 一次性给所有目标td绑定hover事件
    $(".table.table-bordered.table-hover.dataTable td[class^='add-from-list_'], .table.table-bordered.table-hover.dataTable td[class^='remove-from-list_']")
        .hover(
            function () {
                $(this).css("background", "#fff2cc");
            },
            function () {
                $(this).css("background", "");
            }
        );
});

最优方案：用CSS实现hover效果 #

如果只是实现hover时的背景色变化，完全不需要JavaScript，用CSS原生实现性能更好：

.table.table-bordered.table-hover.dataTable td[class^='add-from-list_']:hover,
.table.table-bordered.table-hover.dataTable td[class^='remove-from-list_']:hover {
    background-color: #fff2cc;
}

内容的提问来源于stack exchange，提问作者Breathing