投资组合筛选器

Question

我正在尝试使用js制作投资组合筛选器（无插件）。到目前为止，我创建的代码

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

所以用数据属性约我选择哪一个将与此选择的导航

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

与数据属性，

和休息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（ CURREN吨元件）

$('.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

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

// 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; 
 
}

<div id="button-container"> 
 
<button type="button">Button</button> 
 
<button type="button">Button</button> 
 
<button type="button">Button</button> 
 
<button type="button">Button</button> 
 
<button type="button">Button</button> 
 
</div>