如果另一個元素具有活動 class，則添加 class，如果沒有 javascript / Z6A2D7208853DAFFCB96FB5A7382B0C7，則將其刪除

Question

如果頁面中的另一個元素具有活動的 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 ...

再一次，對不起我的英語......

謝謝 ！

Answer 1

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

});