jQuery同位素过滤：当网格中的数据类别中没有项目时添加一个类

Question

我有一个同位素布局，其中有一个过滤器对网格项进行排序;并且按项目排序时，网格中不在选定数据类别中的项目将其CSS透明度更改为.25。

问题是当网格完成时 - 无论是在初始页面加载还是在排序按钮操作的“arrangeComplete”之后 - 都有某些数据类别在网格中没有项目。这意味着某些排序按钮仍然可以点击，即使它们没有排序，因为它们在网格中没有任何项目。

我想给这些按钮添加一个类，并且“按下”按钮以使它们不是活动链接。

Codepen：http://codepen.io/anon/pen/WooJom

即：在所有的按钮，红色，绿色，蓝色，白色都有项目和排序;按钮橙色和灰色没有项目，所以我想添加一个类给他们，并“declick”他们。

我

1）怎么能算在网格中的项目，

2）寻找是否有为零的项目，如果是

3）添加一个类按钮（s）以便按钮的不透明度为 .25，并且

4）按钮也被删除，因此它们不是活动链接？

在哪里以及如何添加到此功能来做到这一点？

var selectedCategory; 

var $grid = $('.isotope-list').isotope({ 
    itemSelector: '.grid-item', 
    masonry: { 
    columnWidth: 160, 
    gutter: 20 
    }, 
    getSortData: { 
    selectedCategory: function(itemElem) { 
     return $(itemElem).hasClass(selectedCategory) ? 0 : 1; 
    } 
    } 
}); 


var $items = $('.row').find('.grid-item'); 

$('.sort-button-group').on('click', '.button', function() { 
    // set selectedCategory 
    selectedCategory = $(this).attr('data-category'); 
    if (selectedCategory == 'all') { 
    $grid.isotope({ 
     sortBy: 'original-order' 
    }); 

    // restore all items to full opacity 
    $items.css({ 
     opacity: 1 
    }); 
    return; 
    } 


    // change opacity for selected/unselected items 
    var selectedClass = '.' + selectedCategory; 
    $items.filter(selectedClass).css({ 
    opacity: 1 
    }); 
    $items.not(selectedClass).css({ 
    opacity: 0.25 
    }); 

    // update sort data now that selectedCategory has changed 
    $grid.isotope('updateSortData'); 
    $grid.isotope({ sortBy: 'selectedCategory' }); 
}); 

    // change is-checked class on buttons 
$('.button-group').each(function(i, buttonGroup) { 
    var $buttonGroup = $(buttonGroup); 
    $buttonGroup.on('click', 'button', function() { 
    $buttonGroup.find('.is-checked').removeClass('is-checked'); 
    $(this).addClass('is-checked'); 
    }); 
}); 

按钮的HTML;我需要一个类添加到这些按钮：

<div class="button-container"> 
<div class="button-group sort-button-group"> 
<button class="button is-checked" data-category="all">all</button> 
<button class="button" data-category="red">red</button> 
<button class="button" data-category="green">green</button> 
<button class="button" data-category="blue">blue</button> 
<button class="button" data-category="white">white</button> 
<button class="button" data-category="orange">orange</button> 
<button class="button" data-category="gray">gray</button> 
</div></div> 

Answer 1

它可以通过在arrangeComplete事件的回调结合来achived。它触发此load页面上，你将需要设置initLayout到false在同位素的设置选项并运行以下手动触发初始布局：

var $grid = $('.grid').isotope({ 
    ... 
    // disable initial layout 
    initLayout: false, 
    ... 
}); 

// ********** Event binding ********** 
// use $grid.one('arrangeComplete', ...) if it is only needed at initial page load 
$grid.on('arrangeComplete', disableEmptySortButtons); 

// manually trigger initial layout 
$grid.isotope(); 

要获得每个类别项目的数量，您可以通过迭代排序按钮的类别，发现没有grid-items该类别相关的，如果它恰好是0，执行该排序按钮如下：

一）添加类disable为opacity: 0.25该按钮的外观

b）设置disabled属性禁用按钮的点击功能

这里是一个功能将类似于：

var disableEmptySortButtons = function() { 
    $('.button-group button').each(function(i, btn) { 
    var $btn = $(btn), 
     thisCategory = $btn.attr('data-category'); 
    if (thisCategory !== 'all' && $('.isotope-container').find('.' + thisCategory).length === 0) { 
     $btn.addClass('disabled').attr('disabled', 'disabled'); 
    } 
    }); 
}; 

下面是一个完整的工作示例更新code pen。