将类添加到同位素中的过滤项目和隐藏项目。按钮不是复选框

Question

我知道这个问题已经得到解答，并且 here is a fiddle 这正是我想要做的，但是，在他们使用单选按钮的示例中，而我使用的是一组按钮（本质上只是单击后获得 class .active 的 div）。

我尝试调整代码，因此 'filters' 给出了与示例相同的输出，据我所知（一个数组，其中包含过滤器的名称 class 里面），所以我不知道为什么它不起作用。

这是我编辑的代码...

    $(document).ready(function(){

        var $container = $('#content');

        $container.isotope({
            itemSelector: '.box',
    });

    $('.nav a').click(function(){

        $('.nav a').removeClass('active');
        $(this).addClass('active');

      var selector = $(this).attr('data-filter');

      $items = $('.box'); // to reference methods on all .item divs later
        // alert($items.length);

        // get checked checkboxes values
        var filters = [];

          filters.push(selector);
          console.log(filters);

         $container.isotope({
                filter: filters
            }, function($changedItems, instance) {
                instance.$allAtoms.filter('.isotope-hidden').removeClass('is-filtered');
                alert((instance.$allAtoms.filter('.isotope-hidden')).length); // here it is
                instance.$filteredAtoms.addClass('is-filtered');
            });

      return false;

    });

    });

任何关于为什么我的版本不起作用的想法将不胜感激。

这是我的 NOT WORKING EXAMPLE

link

Answer 1

您的变量 filters 是一个数组。我认为它应该是一个字符串才能工作。

所以就这样做吧：

var filters = [];
filters.push(selector);
filters = filters.join(', ');

事实上，如果您一次只使用一个过滤器（看起来），您可以直接使用您的变量 selector，因为它已经包含您的过滤器 class 名称。

希望对您有所帮助！

将类添加到同位素中的过滤项目和隐藏项目。按钮不是复选框

Adding classes to filtered items and hidden items in Isotope. Buttons not checkbox

javascript

jquery

filtering

jquery-isotope

将 类 添加到同位素中的过滤项目和隐藏项目。按钮不是复选框

Adding classes to filtered items and hidden items in Isotope. Buttons not checkbox

javascript

jquery

filtering

jquery-isotope

将类添加到同位素中的过滤项目和隐藏项目。按钮不是复选框