JQuery 悬停功能 select 所有具有相同 class 名称的元素

Question

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

此处示例：

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

以下是您的代码所需的更改。

HTML 变化：

<ul>
    <li class="cell orange-cell" data-color="orange">Home</li>
    <li class="cell green-cell" data-color="green">About</li>
    <li class="cell purple-cell" data-color="purple">Contact</li>
    <li class="cell white-cell" data-color="white">Num</li>
</ul>

<h1>Some text here</h1>

<ul>
    <li class="cell orange-cell" data-color="orange">Home</li>
    <li class="cell green-cell" data-color="green">About</li>
    <li class="cell purple-cell" data-color="purple">Contact</li>
    <li class="cell white-cell" data-color="white">Num</li>
</ul>

<h1>Some text here</h1>

<ul>
    <li class="cell orange-cell" data-color="orange">Home</li>
    <li class="cell green-cell" data-color="green">About</li>
    <li class="cell purple-cell" data-color="purple">Contact</li>
    <li class="cell white-cell" data-color="white">Num</li>
</ul>

<div id="darkness"></div>

JS 变化：

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

Answer 2

如果你不想改变html你可以这样做。

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

Answer 3

试试这个代码。您需要在这里注意的一件事是，您需要始终在 li 标签

的第二个位置添加颜色 class （绿色单元格，橙色单元格）

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();
        });
    });
});

JQuery 悬停功能 select 所有具有相同 class 名称的元素

JQuery hover function select all elements with same class name

jquery

jquery-selectors