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。