JQuery hover函数选择具有相同类名

Question

需要突出显示当前悬停元素+具有相同颜色/类名的所有其他元素。

此处示例：

https://codepen.io/Kerrys7777/pen/LkaYOW

jQuery( document ).ready(function( $ ) {
    $('.orange-cell, .green-cell, .purple-cell, .white-cell').hover(function() {
        $(this).addClass('z-relative');
        $('#darkness').fadeTo(200, 1);
    },function() {
        $(this).removeClass('z-relative');
        $('#darkness').fadeTo(200, 0, function(){
            $(this).hide();
        });
    });
});

Answer 1

试试这段代码。您需要注意的一件事是，您需要始终在li标签内的第二位添加颜色类（绿色单元格，橙色单元格）

jQuery(document).ready(function ($) {
    var highlitedClass;
    $('.orange-cell, .green-cell, .purple-cell, .white-cell').hover(function () {
        $(this).addClass('z-relative');
        var liClass = $(this).prop("class");
        $('#darkness').fadeTo(200, 1);
        liClass = liClass.split(' ');
        highlitedClass = liClass[1];
        $("." + highlitedClass).addClass('z-relative');

    }, function () {
        $(this).removeClass('z-relative');
        $("." + highlitedClass).removeClass('z-relative');
        $('#darkness').fadeTo(200, 0, function () {
            $(this).hide();
        });
    });
});