从按钮删除活动课程

Question

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

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

这是我的代码：

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