使用 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();
  }
});

Answer 2

农民的方式：

$('button').click(function(){
    $('button').removeClass('selected');
  $('li').removeClass('selected');
  if($(this).attr('data-filter') == 'all') {
    $('li').addClass('selected');
  } else {
    $('.'+$(this).attr('data-filter')).addClass('selected');
    $(this).addClass('selected');
  }
});

JSFiddle : https://jsfiddle.net/ggdv613j/3/