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
i.e .tabone .toggleClass
it should add class to first div .sectionmenu
, similarly when you hover our the second div
i.e .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>
One approach is as follows, here we use jQuery to add a custom data-*
attribute in order to relate the elements together:
// 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>
References:
addClass()
.attr()
.closest()
.data()
.find()
.not()
.on()
.removeClass()
.Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments