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/

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

2 个答案: