I'm trying to add a class to a div if another element in the page has an active class. I would like to add "reveal" class to a specific div if one svg element has the active class. It works manually with HTML but I can't trigger my "reveal" class in a dynamic way if I change the active class in another element. I succeeded to change the active class, but there is no effect on my div element... Any suggestion is welcomed and I apologize for my english...
Here is my HTML:
<svg>
<g class="region dep28"> <!-- I can for exemple, manually put "active" class here and it
triggers the "reveal" class lower -->
<path class="st0"/>
</g>
<g class="region dep45">
<path class="st1"/>
</g>
</svg>
<div class="clublist club28"> <!-- Has "reveal" if I put manually "active" class upper --> ..... </div>
<div class="clublist club45">
.....
</div>`
Here is my JavaScript:
$(".region").click(function () {
$(".region").removeClass("active");
$(this).addClass("active");
});
if ( $(".dep28").hasClass('active') ) {
$(".club28").addClass("reveal");
} else { $(".club28").removeClass("reveal");
}
So I would like to add the "reveal" class on.club45 if I have the active class on.dep45...
Once again, i'm sorry for my english...
Thanks !
It should work if you move the if-else statement into your click function, since the reveal doesn't get triggered as it's not in the same function.
$(".region").click(function () {
$(".region").removeClass("active");
$(this).addClass("active");
//Retrieve class names
var classNames = $(this).attr('class').split(/\s+/)
//Get the dep+id
var depClass = classNames[1]; //dep28
//Retrieve the id
var id = depClass.split('dep')[1];
//This if-else statement has been moved inside the click function
if ($(".dep" + id).hasClass('active')) {
$(".club" + id).addClass("reveal");
}
else {
$(".club" + id).removeClass("reveal");
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.