JSFiddle - React, Tailwind, and code Playground

by cooper081

HTML

<!-- 按鈕 -->
    <div class="item-container">
      <div class="itemlist">
        <label class="items">
          <input type="checkbox" data-name="it001">
          <div class="items_inner">
            <span>pic-1</span>
          </div>
        </label>
      </div>
      <div class="itemlist">
        <label class="items">
          <input type="checkbox" data-name="it002">
          <div class="items_inner">
            <span>pic-2</span>
          </div>
        </label>
      </div>
      <div class="itemlist">
        <label class="items">
          <input type="checkbox" data-name="it003">
          <div class="items_inner">
            <span>pic-3</span>
          </div>
        </label>
      </div>
    </div>


    <!-- 項目 -->
    <div class="shop-container">
      <div class="shopbox it001">
        <div class="inner_box">
          <img src="https://images.unsplash.com/photo-1631889729007-2f1a4eb842ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="">
        </div>
      </div>
      <div class="shopbox it002">
        <div class="inner_box">
          <img src="https://images.unsplash.com/photo-1631875828712-d8cc76370d45?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=654&q=80" alt="">
        </div>
      </div>
      <div class="shopbox it003">
        <div class="inner_box">
          <img src="https://images.unsplash.com/photo-1590058275457-db9c95005479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" alt="">
        </div>
      </div>
      <div class="shopbox it003">
        <div class="inner_box">
          <img src="https://images.unsplash.com/photo-1590058275457-db9c95005479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" alt="">
        </div>
      </div>
    </div>

CSS

.item-container {
  margin-top: 50px;
}

.item-container .items {
  display: flex;
  width: 100%;
}

.item-container .items_inner {
  margin-left: 5px;
}

.shop-container {
  display: flex;
  flex-wrap: wrap;
}

.shop-container .shopbox {
  width: 25%;
}

.shop-container .shopbox .inner_box {
  margin: 50px;
}

.shop-container .shopbox img {
  width: 100%;
}

.hide {
  display: none;
}

JavaScript

const pdItem = document.querySelectorAll('.shopbox');



document.querySelector('.item-container').addEventListener('click', (event) => {

  const filterClass = event.target.dataset['name'];

  for (var i = 0; i < pdItem.length; i++) {
    if (!pdItem[i].classList.contains(filterClass)) {
      pdItem[i].classList.add('hide');
    } else {
      pdItem[i].classList.remove('hide');
    }
  }


});