使用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应用于他。

这是一个小提琴链接

我很难成功地比较数据过滤器和两个不同元素的类名，并且也只能将一个类添加到一个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/