javascript - 使用 jQuery 过滤具有匹配数据过滤器和类名的元素

Question

我有一个带有数据过滤器的按钮 div。

<div class="filters">
  <button class="selected" data-filter="all">Show All</button>
  <button data-filter="type-one">Show One</button>
  <button data-filter="type-two">Show Two</button>
  <button data-filter="type-three">Show Three</button>
</div>

单击按钮应将类 .match 添加到列表中的特定 li 元素，该元素与单击的按钮的数据过滤器具有相同的类名。

<ul class="elements">
  <li class="type-one other-class">Element 1</li>
  <li class="type-two other-class">Element 2</li>
  <li class="type-three other-class">Element 3</li>
</ul>

被点击的按钮也应该只应用.selected。

Here is a Fiddle link

我无法成功比较数据过滤器和两个不同元素的类名，并且仅向一个 li 添加类而不是向所有元素添加类。可能遗漏了一些非常明显的东西。另外，我省略了 JS 代码，以便对此有新的认识。

欢迎任何帮助。

Answer 1

您可以尝试以下方法

//this event handler will listen to buttons click
$("button").click(function(){
  //remove selected class from all buttons
  $("button").removeClass("selected");

  //add selected class only to clicked button
  $(this).addClass("selected");

  //get data type filter
  var dataFilter = $(this).data('filter');

  //if data filter is all show all of them
  if(dataFilter == "all") {
      $(".elements li").show();
  }
  else
  {
    //else hide all of them and show only the one with correct data filter
    $(".elements li").hide();
    $("." + dataFilter).show();
  }
});