投資組合篩選器

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>