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

- Filippo Rivolta

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>

- Aefits

---

关于这个问题，如果我在筛选器上放置更多的类，例如<li class="filterOne filterTwo">Filter One</li>，它也不会起作用。 - Filippo Rivolta

好的。如果您发现其他更好、更快的解决方法，请分享。 - Aefits

如果你没有看到更好的方法，那就考虑采纳我的建议代码作为选定答案。谢谢。 - Aefits