[英]Add class if another element has active class and delete this if not with javascript / JQuery
如果页面中的另一个元素具有活动的 class,我正在尝试将 class 添加到 div。 如果一个 svg 元素具有活动的 class,我想将“显示”class 添加到特定 div。 它与 HTML 一起手动工作,但如果我在另一个元素中更改活动的 class,我无法以动态方式触发我的“显示” class。 我成功更改了活动的 class,但对我的 div 元素没有影响...欢迎任何建议,我为我的英语道歉...
这是我的 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>`
这是我的 JavaScript:
$(".region").click(function () {
$(".region").removeClass("active");
$(this).addClass("active");
});
if ( $(".dep28").hasClass('active') ) {
$(".club28").addClass("reveal");
} else { $(".club28").removeClass("reveal");
}
因此,如果我有活动的 class on.dep45,我想在 on.club45 上添加“显示”class ...
再一次,对不起我的英语......
谢谢 !
如果将 if-else 语句移动到单击 function 中,它应该可以工作,因为显示不会被触发,因为它不在同一个 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");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.