Функция наведения JQuery выбирает все элементы с одним и тем же именем класса.

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

Ниже приведены изменения, необходимые для вашего кода.

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

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