什麼是更好的方式來做這個與jQuery簡單的過濾器

Question

我正在學習jQuery我做了一個簡單的選擇過濾器的基本知識與學習新技術的目的。 我的問題是，什麼是更好也許更復雜的方式來做到這一點： https://codepen.io/frivolta/pen/LLwjjy

$(".elementFilter li").on("click",eventTrigger); 

function eventTrigger(){ 
    var getFilterName = $(this).attr("class"); 
    if(getFilterName!="all"){ 
    $(".elementList li:not([data-category='"+getFilterName+"'])").hide(); 
    $(".elementList [data-category='"+getFilterName+"']").show(); 
    }else{ 
    $(".elementList li").show(); 
    } 
} 


<div class="elements"> 
    <ul class="elementFilter"> 
    <li class="all">Show all</li> 
    <li class="filterOne">Filter One</li> 
    <li class="filterTwo">Filter Two</li> 
    <li class="filterThree">Filter Three</li> 
    <li class="filterFour">Filter Four</li> 
    </ul> 
    <ul class="elementList"> 

    <li data-category="filterOne">Filter One</li> 
    <li data-category="filterTwo">Filter Two</li> 
    <li data-category="filterThree">Filter Three</li> 
    <li data-category="filterFour">Filter Four</li> 
    </ul> 
</div> 

我想他們之間的不同的功能和參數傳遞，如果您有任何意見，我會很高興聽到那。 謝謝， F.

Answer 1

你的代碼幾乎沒問題，但如果你改變添加li元素中的其他類，它將不會運行。看到我的代碼如下。我解決了問題。

$(".elementFilter li").on("click",eventTrigger); 

function eventTrigger(){ 
    var isClasssAll = $(this).hasClass("all"); 
    var getFilterName = $(this).attr("data-category"); 

    if(!isClasssAll){ 
    $(".elementList li:not([data-category='"+getFilterName+"'])").hide(); 
    $(".elementList [data-category='"+getFilterName+"']").show(); 
    }else{ 
    $(".elementList li").show(); 
    } 
} 



<div class="elements"> 
    <ul class="elementFilter"> 
    <li class="all asdasd">Show all</li> 
    <li data-category="filterOne" class="filterOne 1">Filter One</li> 
    <li data-category="filterTwo" class="filterTwo 2">Filter Two</li> 
    <li data-category="filterThree" class="filterThree 3">Filter Three</li> 
    <li data-category="filterFour" class="filterFour 4">Filter Four</li> 
    </ul> 
    <ul class="elementList"> 

    <li data-category="filterOne">Filter One</li> 
    <li data-category="filterTwo">Filter Two</li> 
    <li data-category="filterThree">Filter Three</li> 
    <li data-category="filterFour">Filter Four</li> 
    </ul> 
</div>