【JavaScript】クリックした要素を活性、その他を非活性にする

2024年03月26日

WEBサイト制作

#HTML
#css
#JavaScript

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はおそらく非常に使う場面が多いであろうギミックを紹介します！

実装例

HTML例

<ul class="bulb-list">
  <li>
    <button class="js-switch">
      <img class="js-image js-null" src="null.png" alt="">
      <img class="js-image js-black" src="black.png" alt="">
      <img class="js-image js-light" src="light.png" alt="">
    </button>
  </li>
  <li>
    <button class="js-switch">
      <img class="js-image js-null" src="null.png" alt="">
      <img class="js-image js-black" src="black.png" alt="">
      <img class="js-image js-light" src="light.png" alt="">
    </button>
  </li>
  <li>
    <button class="js-switch">
      <img class="js-image js-null" src="null.png" alt="">
      <img class="js-image js-black" src="black.png" alt="">
      <img class="js-image js-light" src="light.png" alt="">
    </button>
  </li>
  <li>
    <button class="js-switch">
      <img class="js-image js-null" src="null.png" alt="">
      <img class="js-image js-black" src="black.png" alt="">
      <img class="js-image js-light" src="light.png" alt="">
    </button>
  </li>
  <li>
    <button class="js-switch">
      <img class="js-image js-null" src="null.png" alt="">
      <img class="js-image js-black" src="black.png" alt="">
      <img class="js-image js-light" src="light.png" alt="">
    </button>
  </li>
  <li>
    <button class="js-switch">
      <img class="js-image js-null" src="null.png" alt="">
      <img class="js-image js-black" src="black.png" alt="">
      <img class="js-image js-light" src="light.png" alt="">
    </button>
  </li>
</ul>

CSS例

.bulb-list{
  width: 100%;
  display: flex;
  list-style: none;
  justify-content: center;
}
.bulb-list button{
  border: none;
  background-color: transparent;
}
.bulb-list img{
  width: 100%;
  max-width: 100%;
}
.bulb-list img:nth-of-type(2),
.bulb-list img:nth-of-type(3){
  display: none;
}
.is-hide{
  display: none!important;
}
.is-show{
  display: block!important;
}

JavaScript例

let switches = document.querySelectorAll('.js-switch');
switches.forEach(function(switchElement) {
  switchElement.addEventListener('click', function(e) {
    let nullImages = document.querySelectorAll('.js-null');
    nullImages.forEach(function(nullImage) {
      nullImage.classList.add('is-hide');
    });
    switchElement.querySelector('.js-light').classList.add('is-show');
    switchElement.querySelector('.js-black').classList.add('is-hide');
    switches.forEach(function(switchItem) {
      if (switchItem !== switchElement) {
        switchItem.querySelector('.js-light').classList.remove('is-show');
        switchItem.querySelector('.js-black').classList.add('is-show');
      }
    });
      switchElement.querySelector('.js-black').classList.remove('is-show');
  });
});