将鼠标悬停在一个 div 上时，如何将 class 添加到另一个 div？

Question

I am trying to add class to .sectionmenu div, but for some reason it adds the class to both the div elements when I hover over the .tabone.toggleClass , the div has same the class.

When you hover our first div ie .tabone.toggleClass it should add class to first div.sectionmenu , similarly when you hover our the second div ie .tabone.toggleClass it should add class to second div.sectionmenu .

 (function($) { $(document).ready(function() { $('.tabone.toggleClass').hover(function() { var mine = $(this).closest('.menubox'); $(this).closest('.main-section').find('.sectionmenu').not(mine).removeClass('class_name'); mine.addClass('class_name'); }); }); }(jQuery));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-section"> <div id="col1"> <div class="hidden">hidden text</div> </div> <div id="col2" class="class"> <div class="menubox tabone"> --> when hover over this div it should add class to first.sectionmenu div <a class="toggleClass">toggleClass</a> <a class="toggleClass">toggleClass</a> </div> <div class="menubox tabone"> <a class="toggleClass">toggleClass</a> <a class="toggleClass">toggleClass</a> </div> </div> <div id="col3" class="class"> <div class="sectionmenu"> <div class="menubox"> <a class="toggleClass">toggleClass</a> <a class="toggleClass">toggleClass</a> </div> </div> <div class="sectionmenu"> <div class="menubox"> <a class="toggleClass">toggleClass</a> <a class="toggleClass">toggleClass</a> </div> </div> </div> </div>

Answer 1

一种方法如下，这里我们使用 jQuery 添加自定义data-*属性，以便将元素关联在一起：

 // here we select elements with an 'id' attribute that starts with // the string 'col', // we then iterate over that collection of elements using the // each() method: $('[id^=col]').each(function() { // caching variables to avoid - where possible - repeated look-ups // for the same items; // here we cache the current element: let ancestor = $(this), // we then cache the '.menubox' descendants of the // current element: menuboxes = ancestor.find('.menubox'), // we then cache the '.toggleClass' elements: toggleClassLinks = ancestor.find('.toggleClass'); // iterating over the menuboxes collection, and setting the // custom 'data-*' attribute (here named 'data-index'), // to contain the index of the current.menubox element // within the collection, or its index within the current // [id^=col] element: menuboxes.attr('data-index', function(i) { return i; }); // if there are a non-zero number of '.toggleClass' elements: if (toggleClassLinks.length) { // we iterate over that collection and use the on() method // to bind the anonymous function as an event-handler for // the 'mouseenter' event: toggleClassLinks.on('mouseenter', function(e) { // caching the current.toggleClass element: let target = $(this), // caching the various elements: grandparent = target.closest('.main-section'), parent = target.closest('.menubox'), // caching the attribute-value of the 'data-index' // attribute we set earlier, using the data() method // (because of a peculiarity of the method we couldn't // set the attribute using that method, but retrieving // is consistent): index = parent.data('index'); // here we find the elements with the class of 'class_name' within the // ancestor element, and remove that class: grandparent.find('.class_name').removeClass('class_name'); // here we use a template-literal string to interpolate the 'index' // variable into the string, to create an attribute-selector wherein // the index is equal to the index of the currently hovered.toggleClass // element's parent: grandparent.find(`[data-index=${index}]`) // we then filter out the current.toggleClass element's parent: .not(parent) // and add the class_name class to the other remaining element(s) // that matched the original selector: .addClass('class_name'); }); } });

 *, ::before, ::after { box-sizing: border-box; font: 1rem / 1.5 sans-serif; font-weight: normal; margin: 0; padding: 0; } div { border: 1px solid #000; padding: 0.5em; }.main-section { border-color: transparent; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; min-height: 50vh; }.main-section>div { display: flex; flex-direction: column; justify-content: space-between; }.class_name, .class_name.toggleClass { color: #f90; transition: color 0.3s ease-in-out; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-section"> <div id="col1"> <div class="hidden">hidden text</div> </div> <div id="col2" class="class"> <div class="menubox tabone"> <a href="#" class="toggleClass">toggleClass</a> </div> <div class="menubox tabone"> <a href="#" class="toggleClass">toggleClass</a> </div> </div> <div id="col3" class="class"> <div class="sectionmenu"> <div class="menubox"> <a href="#" class="toggleClass">toggleClass</a> </div> </div> <div class="sectionmenu"> <div class="menubox"> <a href="#" class="toggleClass">toggleClass</a> </div> </div> </div> </div>

JS 小提琴演示。

参考：

• addClass() 。
• attr() 。
• closest() 。
• data() 。
• find() 。
• not() 。
• on() 。
• removeClass() 。