JavaScriptのクラスの付替えについて

Question

クリックした要素にactiveクラスをつけて、すでにactiveクラスを持っているブロックからはクラスを取り除きたいのですが、同じ箇所をクリックしないと取り除くことができません。

■現状

●クリック前

<li class="active"></li> <li></li> <li></li>

●違う箇所をクリックすると

<li class="active"></li> <li class="active"></li> <li></li>

●同じ箇所をクリックするとクラスが消える

<li></li> <li class="active"></li> <li></li>

■実現したいこと

●クリック前

<li class="active"></li> <li></li> <li></li>

●違う箇所をクリックすると

<li></li> <li class="active"></li> <li></li>

<ul class="thumb__list">
    <?php
    foreach ($meta['slide_images'] as $i) : ?>
      <li class="thumb__list__item">
        <a class="thumb__list__item__link" href="javascript:void(0);">
          <img src="<?= $i['image_group']['image'] ?>">
        </a>
      </li>
    <?php endforeach; ?>
  </ul>

.thumb__list {
    &__item {
      &.active {
        border: 3px solid #3a8344;
      } 
     }
    }

const thumbBlock = document.querySelectorAll(".thumb__list__item")
  thumbBlock[0].classList.add('active');

thumbBlock.forEach((item,index)=>{
    item.onclick = function(){

        if(item.classList.contains('active')){
          item.classList.remove('active');
        }else{
          this.classList.toggle('active');
        }
      
    }

  });
  

Answer 1

.active な要素は一つしかないのだから、下記でもいいですね。

const thumbBlock = document.querySelectorAll(".thumb__list__item")
thumbBlock[0].classList.add('active');

thumbBlock.forEach((item,index)=>{
  item.onclick = function(){
    this.parentNode.querySelector(".active").classList.remove('active');
    this.classList.add('active');
  }
});

Answer 2

こちらで試してください。jquery使います。

const activeClass = "active";
const list = $(".thumb__list__item");
list.on("click", (e) => {
  list.removeClass(activeClass);
  const $trigger = $(e.currentTarget);
  $trigger.addClass(activeClass);
});

Comments

[cafe1111]

ご回答ありがとうございます！

Answer 3

クリックされた要素（下記ではitem）から見た親要素のすべての子要素のactiveクラスを消して、その後自分にactiveクラスを加えれば良いと思います。

// 自分の親要素を取得
const parent = item.parentNode;
// 親要素の全ての子要素のリストを取得
const children = parent.children;
// 親要素の全ての子要素のリストを配列に変換してループしてactiveクラスを消す
Array.from(children).forEach(function(child) {
    child.classList.remove('active');
});
// 自分にactiveクラスを付ける
item.classList.add('active');

Comments

[cafe1111]

ご回答ありがとうございます！
無事できました！！