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

Question

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

我尝试调整代码，以便“过滤器”提供与示例中相同的输出，据我所知，它确实如此(内部包含过滤器类名称的数组)，所以我不知道为什么它不起作用。

这是我编辑的代码...

    $(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 的链接

Answer 1

你的变量filters是一个数组。我认为它应该是一个可以工作的字符串。

所以就这样做:

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

事实上，如果您一次只使用一个过滤器(如图所示)，则可以直接使用变量selector，因为它已经包含您的过滤器类名称。

希望对你有帮助!