资源

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中的逻辑。
活动课程增加了两次

您可以使用toggle属性中的classList功能。
根据所选按钮显示产品
- 使用data属性并使用classList属性。
- I.e：设置为按钮：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

从按钮中删除活动类

1 个答案:

资源