如果另一个元素具有活动类，则添加类，如果没有 javascript / JQuery，则将其删除答案

【问题标题】：Add class if another element has active class and delete this if not with javascript / JQuery如果另一个元素具有活动类，则添加类，如果没有 javascript / JQuery，则将其删除
【发布时间】：2020-10-06 16:16:52
【问题描述】：

如果页面中的另一个元素具有活动类，我正在尝试向 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 上添加“显示”课程...

再一次，对不起我的英语......

谢谢！

【问题讨论】：

标签： javascript class svg

【解决方案1】：

如果您将 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");
  }

});

【讨论】：

非常感谢，它有效！最后一个问题：我有 6 例“if 条件”（.club28、.club45、...）用 JS 写这个最干净的方法是什么？
很高兴我能帮上忙！我已经更新了答案，这将使它成为动态而不是静态的。但是，如果您想要一种静态方式，则开关盒可能就足够了。
这里，如果另一个 dep 处于活动状态，则不会删除“显示”类。很抱歉，我对 JavaScript 不满意...
我认为您可以在将活动类添加到该区域之前获取所有部门并删除活动类。