javascript - 如果另一个元素具有活动类,则添加类,如果不使用 javascript/JQuery,则将其删除
问题描述
如果页面中的另一个元素具有活动类,我正在尝试向 div 添加一个类。如果一个 svg 元素具有活动类,我想将“显示”类添加到特定的 div。它使用 HTML 手动工作,但如果我更改另一个元素中的活动类,我无法以动态方式触发我的“显示”类。我成功更改了活动课程,但对我的 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");
}
因此,如果我在 .dep45 上有活动类,我想在 .club45 上添加“显示”类...
再一次,对不起我的英语......
谢谢 !
解决方案
如果将 if-else 语句移到 click 函数中,它应该可以工作,因为显示不会被触发,因为它不在同一个函数中。
$(".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");
}
});
推荐阅读
- visual-studio - 如何在 Xamarin.Forms 中为 iOS 添加资产目录?
- java - 为什么只有 int 传入时,android 中的 setText 会出错?
- angular - 角度材质菜单位置
- javascript - 如何使用胖箭头符号编写异步函数模块函数
- bash - 如何在用户数据部分使用 Cloud Formation 在 /etc/fstab 上挂载 EFS 端点?
- python - 如何将此 for 循环转换为数据框?
- swift - 使用 Vapor 框架建立数据库连接
- python - anaconda navigator updater 更新多长时间?
- javascript - 使用 javascript 插入 PNG 注释块 (iTXt)
- reactjs - Webpack 预设时缺少类属性转换:“env”