I have the following jQuery code which at the moment works perfectly well:
$("#post-27") // select your element
.hover(function(){ // trigger the mouseover event
$("#post-102.isotope-item").toggleClass('dim-portfolio-item');
$("#post-81.isotope-item").toggleClass('dim-portfolio-item');
$("#post-95.isotope-item").toggleClass('dim-portfolio-item');
$("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
$("#post-102.isotope-item").toggleClass('dim-portfolio-item');
$("#post-81.isotope-item").toggleClass('dim-portfolio-item');
$("#post-95.isotope-item").toggleClass('dim-portfolio-item');
$("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});
$("#post-102") // select your element
.hover(function(){ // trigger the mouseover event
$("#post-27.isotope-item").toggleClass('dim-portfolio-item');
$("#post-81.isotope-item").toggleClass('dim-portfolio-item');
$("#post-95.isotope-item").toggleClass('dim-portfolio-item');
$("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
$("#post-27.isotope-item").toggleClass('dim-portfolio-item');
$("#post-81.isotope-item").toggleClass('dim-portfolio-item');
$("#post-95.isotope-item").toggleClass('dim-portfolio-item');
$("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});
$("#post-81") // select your element
.hover(function(){ // trigger the mouseover event
$("#post-27.isotope-item").toggleClass('dim-portfolio-item');
$("#post-102.isotope-item").toggleClass('dim-portfolio-item');
$("#post-95.isotope-item").toggleClass('dim-portfolio-item');
$("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
$("#post-27.isotope-item").toggleClass('dim-portfolio-item');
$("#post-102.isotope-item").toggleClass('dim-portfolio-item');
$("#post-95.isotope-item").toggleClass('dim-portfolio-item');
$("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});
$("#post-95") // select your element
.hover(function(){ // trigger the mouseover event
$("#post-27.isotope-item").toggleClass('dim-portfolio-item');
$("#post-102.isotope-item").toggleClass('dim-portfolio-item');
$("#post-81.isotope-item").toggleClass('dim-portfolio-item');
$("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
$("#post-27.isotope-item").toggleClass('dim-portfolio-item');
$("#post-102.isotope-item").toggleClass('dim-portfolio-item');
$("#post-81.isotope-item").toggleClass('dim-portfolio-item');
$("#post-99.isotope-item").toggleClass('dim-portfolio-item');
});
$("#post-99") // select your element
.hover(function(){ // trigger the mouseover event
$("#post-27.isotope-item").toggleClass('dim-portfolio-item');
$("#post-102.isotope-item").toggleClass('dim-portfolio-item');
$("#post-81.isotope-item").toggleClass('dim-portfolio-item');
$("#post-95.isotope-item").toggleClass('dim-portfolio-item');
}, function(){ // trigger the mouseout event
$("#post-27.isotope-item").toggleClass('dim-portfolio-item');
$("#post-102.isotope-item").toggleClass('dim-portfolio-item');
$("#post-81.isotope-item").toggleClass('dim-portfolio-item');
$("#post-95.isotope-item").toggleClass('dim-portfolio-item');
});
I've previously asked for help in making jQuery code more efficient and was able to using an array with help from others here. However, an array alone wouldn't work here I think I need to use some kind of loop which can tell which of the 5 variables I'm on, and applies the toggle class event appropriately.
For example, I could do something with an array like:
var $ids = ["#post-27", "#post-102", "#post-81", "#post-95", "#post-99"],
$ids.forEach(function(v) {
if($(v).mouseIsOver()) {
$("#post-102.isotope-item").toggleClass('dim-portfolio-item');
$("#post-81.isotope-item").toggleClass('dim-portfolio-item');
$("#post-95.isotope-item").toggleClass('dim-portfolio-item');
$("#post-99.isotope-item").toggleClass('dim-portfolio-item');
} else {
$("#post-102.isotope-item").toggleClass('dim-portfolio-item');
$("#post-81.isotope-item").toggleClass('dim-portfolio-item');
$("#post-95.isotope-item").toggleClass('dim-portfolio-item');
$("#post-99.isotope-item").toggleClass('dim-portfolio-item');
}
});
The trouble is the #post-X.isotope-item selectors change depending on which part of the array the forEach function is cycling through. Is there a way of telling which variable is currently being used? I can't explain what I mean in programming terms but in plain English:
if current variable being processed = "the variable", then don't toggle classes
else
toggleClass...
Then I could add that check to each of the toggleClass parts and it would work, I think. I'm still new to jQuery/javascript and don't know how to proceed, hopefully I've explained it well enough.
Any help would be greatly appreciated.
PS: I can't use pure CSS hover because the elements are not nested.
I'm not sure is there are any advantages or disadvantages to .hover / .mouseIsOver