Question

如果没有相应的数据，我想知道如何禁用过滤器按钮（添加class "disabled"）。

以下是我目前的代码。在此示例中，如果没有＆＃34; Category 2"的数据，我想将类"is-none"添加到过滤器按钮。

感谢您的帮助！

＆＃13;

   
/* Shows and hides filtered items. */
$(".filter-simple-button").click(function() {
  var value = $(this).attr('data-filter');
  if (value === "all") {
    $('.filter-simple-item').show('1000');
  } else {
    $(".filter-simple-item").not('.' + value).hide('3000');
    $('.filter-simple-item').filter('.' + value).show('3000');
  }
});

/* Changes active class on filter buttons */
$('.filter-simple-button').click(function() {
  $(this).siblings().removeClass('is-active');
  $(this).addClass('is-active');
});

＆＃13;

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="button-group">
  <button class="button filter-simple-button is-active" data-filter="all">All items</button>
<button class="button hollow filter-simple-button" data-filter="category-1">Category 1</button>
<button class="button hollow filter-simple-button" data-filter="category-2">Category 2</button>
<button class="button hollow filter-simple-button" data-filter="category-3">Category 3</button>
</div>

<div class="grid-x grid-padding-x">
<div class="filter-simple-item category-1">
Post #1 in Category 1 
</div>
<div class="filter-simple-item category-1">
Post #2 in Category 1
</div>
<div class="filter-simple-item category-3">
Post #3 in Category 3
</div>
<div class="filter-simple-item category-1">
Post #4 in Category 1 
</div>

＆＃13;

Answer 1

    There you go with the correct snippet. 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <div class="button-group">
      <button class="button filter-simple-button is-active" data-filter="all">All items</button>
    <button class="button hollow filter-simple-button" data-filter="category-1">Category 1</button>
    <button class="button hollow filter-simple-button" data-filter="category-2">Category 2</button>
    <button class="button hollow filter-simple-button" data-filter="category-3">Category 3</button>
    </div>

    <div class="grid-x grid-padding-x">
    <div class="filter-simple-item category-1">
    Post #1 in Category 1 
    </div>
    <div class="filter-simple-item category-1">
    Post #2 in Category 1
    </div>
    <div class="filter-simple-item category-3">
    Post #3 in Category 3
    </div>
    <div class="filter-simple-item category-1">
    Post #4 in Category 1 
    </div>


    /* Shows and hides filtered items. */
    $(".filter-simple-button").click(function() {
      var value = $(this).attr('data-filter');
      if (value === "all") {
        $('.filter-simple-item').show('1000');
      } else {
        $(".filter-simple-item").not('.' + value).hide('3000');
        $('.filter-simple-item').filter('.' + value).show('3000');
      }
    });

    /* Changes active class on filter buttons */
    $('.filter-simple-button').click(function() {
      $(this).siblings().removeClass('is-active');
      $(this).addClass('is-active');
    if (!$(this).hasClass("category-2")){
        $(this).addClass("is-none");
    }
    });
    Let me know if it solves the issue.

https://codepen.io/niazi71/pen/vpPJBg

如果没有数据，则禁用过滤器按钮

1 个答案: