从按钮中删除活动类

Question

我的网站上有 3 个代表产品类别的按钮。我想使用具有活动类的“所有产品”按钮加载页面，然后在单击时删除该类并添加到另一个按钮。似乎有一个问题导致一个活动类被两次添加到一个按钮或没有被删除，因此两个按钮将同时处于活动状态。 Two active buttons at once 和 Active class added twice

如果我从“所有产品”按钮中删除活动类，我可以解决此问题，但我希望页面加载时将其设置为活动。这些按钮还必须根据元素所属的类别来控制元素的可见性。

这是我的代码：

HTML：

  <div class="list-group" id="myBtnContainer">
        <button class="btn list-group-item active" onclick="filterSelection('all')">All Products</button>
        <button class="btn list-group-item" onclick="filterSelection('shirts')">Shirts</button>
        <button class="btn list-group-item" onclick="filterSelection('pants')">Pants</button>
      </div>

HTML - 示例元素：

<div class="col-lg-4 col-md-6 mb-4 filterDiv shirts">
              <div class="card h-100 ">
                <a href="product.html"><img class="card-img-top" src="blackshirt.png" alt=""></a>
                <div class="card-body">
                  <h4 class="card-title">
                    <a href="product.html" class="product-title">Black Shirt</a>
                  </h4>
                  <h5>$24.99</h5>
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
                </div>
                <div class="card-footer">
                  <a href="product.html" class="btn btn-success view-btn" role="button"><i class="fa fa-search"></i> View Product</a>
                </div>
              </div>
            </div>

JavaScript

filterSelection("all")
function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("filterDiv");
    if (c == "all") c = "";
    for (i = 0; i < x.length; i++) {
      w3RemoveClass(x[i], "show");
      if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
    }
  }

  function w3AddClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
      if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
    }
  }

  function w3RemoveClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
      while (arr1.indexOf(arr2[i]) > -1) {
        arr1.splice(arr1.indexOf(arr2[i]), 1);
      }
    }
    element.className = arr1.join(" ");
  }

  // Add active class to the current button (highlight it)
  var btnContainer = document.getElementById("myBtnContainer");
  var btns = btnContainer.getElementsByClassName("btn");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function(){
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
    });
  }

Answer 1

• 同时激活两个按钮

  检查此函数filterSelection中的逻辑。

• 活动类添加了两次

  您可以使用classList 属性中的toggle 函数。

• 根据选择的按钮显示产品

  • 使用data 属性并使用classList 属性。
  • 即：设置为您的按钮：data-target='shirts'、data-target='pants' 等等。
  • 使用具有这种风格的类hide：display: none

var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].classList.toggle('active');
    this.classList.toggle('active');
    
    var target = this.dataset.target;
    filterSelection(target);
  });
}

function filterSelection(target) {
  document.querySelectorAll('.filterDiv').forEach((div) => {
    if (target === 'all' || div.classList.contains(target)) {
      div.classList.remove('hide');
    } else {
      div.classList.add('hide');
    }
  });
}

.active {
  background-color: lightgreen;
}

.hide {
  display: none
}

<div class="list-group" id="myBtnContainer">
  <button class="btn list-group-item active" data-target='all'>Show all</button>
  <button class="btn list-group-item" data-target='shirts'>Shirts</button>
  <button class="btn list-group-item" data-target='pants'>Pants</button>
</div>

<div class="col-lg-4 col-md-6 mb-4 filterDiv shirts">
  <div class="card h-100 ">
    <a href="product.html"><img class="card-img-top" src="blackshirt.png" alt=""></a>
    <div class="card-body">
      <h4 class="card-title">
        <a href="product.html" class="product-title">Black Shirt</a>
      </h4>
      <h5>$24.99</h5>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
    </div>
    <div class="card-footer">
      <a href="product.html" class="btn btn-success view-btn" role="button"><i class="fa fa-search"></i> View Product</a>
    </div>
  </div>
</div>




<div class="col-lg-4 col-md-6 mb-4 filterDiv pants">
  <div class="card h-100 ">
    <a href="product.html"><img class="card-img-top" src="blackshirt.png" alt=""></a>
    <div class="card-body">
      <h4 class="card-title">
        <a href="product.html" class="product-title">Pants</a>
      </h4>
      <h5>$44.99</h5>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
    </div>
    <div class="card-footer">
      <a href="product.html" class="btn btn-success view-btn" role="button"><i class="fa fa-search"></i> View Product</a>
    </div>
  </div>
</div>

资源

• Element.classList