Question

我正在尝试使用js（没有插件）进行投资组合过滤。到目前为止我创建了导航

<div class="filter-nav">
    <div class="nav-wrap">
        <button class="btn fil-cat active" href="" data-rel="kuche">
            <span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
            <span>Kuche</span>
        </button>
        <button class="btn fil-cat" data-rel="bade">
        <span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
        <span>Bade</span>
        </button>
        <button class="btn fil-cat" data-rel="mobel">
            <span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
            <span>Mobel</span>
        </button>
        <button class="btn fil-cat" data-rel="schreinerei">
            <span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
            <span>Schreinerei</span>
        </button>
        <button class="btn fil-cat" data-rel="acrylstein">
            <span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
            <span>Acrylstein</span>
        </button>
        <button class="btn fil-cat" data-rel="objekte">
            <span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
            <span>Objekte</span>
        </button>
    </div>
</div>

包含数据属性

以及其他代码

<div id="inspiration" class="row in-wrap">
  <div class="tile scale-anm kuche col-lg-6">
        <img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
  </div>
  <div class="tile scale-anm bade col-lg-6">
    <img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
  </div>
  <div class="tile scale-anm kuche col-lg-6">
        <img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
  </div>
  <div class="tile scale-anm bade col-lg-6">
    <img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
  </div>
  <div class="tile scale-anm kuche col-lg-6">
        <img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
  </div>
  <div class="tile scale-anm bade col-lg-6">
    <img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
  </div>
</div>

因此，对于数据属性，我选择使用此JS代码选择哪一个

function filterInspiration() {
            var selectedClass = "";

            $('.fil-cat').click(function(){

                selectedClass = $(this).attr("data-rel");
                $("#inspiration").fadeTo(100, 0.1);
                $("#inspiration div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
                setTimeout(function() {

                  $("."+selectedClass).fadeIn().addClass('scale-anm');
                  $("#inspiration").fadeTo(300, 1);

                }, 300); 
            });
        };
filterInspiration();

我所堆叠的部分是，如何将类激活，例如添加到我点击的按钮，然后当我点击过滤器导航中的另一个按钮，然后在之前删除并添加到另一个按钮？

由于

Answer 1

您可以使用jquery功能添加和删除类，即addClass＆amp; removeClass

首先从所有元素中删除类active
将active添加到this（当前元素）

$('.fil-cat').click(function(e) {
  $('.fil-cat').removeClass('active');
  $(this).addClass('active');
  
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-nav">
  <div class="nav-wrap">
    <button class="btn fil-cat" href="" data-rel="kuche">
            <span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
            <span>Kuche</span>
        </button>
    <button class="btn fil-cat" data-rel="bade">
        <span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
        <span>Bade</span>
        </button>
    <button class="btn fil-cat" data-rel="mobel">
            <span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
            <span>Mobel</span>
        </button>
    <button class="btn fil-cat" data-rel="schreinerei">
            <span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
            <span>Schreinerei</span>
        </button>
    <button class="btn fil-cat" data-rel="acrylstein">
            <span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
            <span>Acrylstein</span>
        </button>
    <button class="btn fil-cat" data-rel="objekte">
            <span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
            <span>Objekte</span>
        </button>
  </div>
</div>

Answer 2

以下是您正在寻找的功能的一个小概念证明。

SET

// Get the container with the buttons...
var container = document.getElementById('button-container');
// and add a click event listener.
container.addEventListener('click', event => {
  // Find the item that has the active class...
  var activeItem = container.querySelector('.active');
  // when such an item exists, remove the active class from the element.
  if (activeItem !== null) {
    activeItem.classList.remove('active');
  }
  
  // When the clicked element is the same as the element that was active, leave. When an active button is clicked it should become inactive.
  if (event.target === activeItem) {
    return;
  }
  
  // Make the clicked button the active button.
  event.target.classList.add('active');
});

.active {
  font-size: 2em;
}

组合过滤器

2 个答案: