javascript - 投资组合过滤器

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 和 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>