jQuery同位素过滤:当网格中的数据类别中没有项目时添加一个类 [英] jQuery Isotope filtering: add a class when there are no items in a data-category in the grid
问题描述
我有一个同位素布局，可以通过过滤器对网格项进行排序；当按按钮对项目进行排序时，不在选定数据类别中的网格中的项目的CSS不透明度更改为.25.
问题在于，当网格完成时-不管是在初始页面加载时，还是在通过排序的按钮操作进行"arrangeComplete"之后，-某些数据类别在网格中都没有项目.这意味着某些排序按钮即使未排序也仍然可以单击，因为它们在网格中没有任何项目.
我想为这些按钮添加一个类，并且还要取消单击"按钮，以使它们不是活动链接.
Codepen: http://codepen.io/anon/pen/WooJom
即:全部"，红色"，绿色"，蓝色"，白色"按钮均具有项目和排序；按钮Orange和Gray没有项目，因此我想向它们添加一个类并取消点击"它们.
我怎么
1)计算网格中的项目，
2)查找零个项目，如果有，则
3)向按钮添加一个类，以使按钮的不透明度为 .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>
可以通过在 arrangeComplete 事件.它会在页面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，请对该排序按钮执行以下操作:
a)为按钮的外观添加disable的类disable
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');
}
});
};
这是更新的代码笔，以获取完整的工作示例.
I have an isotope layout with sorting of grid items by a filter; and when items are sorted by button, the items in the grid that are not in the selected data-category have their CSS opacity changed to .25.
The problem is that when the grid is complete - either on initial page load or after an "arrangeComplete" by the button action of sorting - there are certain data-categories that have no items in the grid. This means that some sorting buttons are still clickable even though they don't sort because they have no items in the grid.
I want to add a class to these buttons, and also "declick" the button(s) so that they are not active links.
Codepen: http://codepen.io/anon/pen/WooJom
I.e.: the buttons All, Red, Green, Blue, White all have items and sort; buttons Orange and Gray have no items, so I want to add a class to them and "declick" them.
How can I
1) count the items in the grid,
2) find if there are zero items, and if so
3) add a class to the button(s) so that the buttons have an opacity of .25, and
4) the button(s) are also declicked so they are not an active link?
Where and how do I add to this function to do that?
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 for the buttons; I need to add a class to these buttons:
<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>
It can be achived by the binding a callback on arrangeComplete event. It trigger this on page load, you will need to set initLayout to false in the isotope's setup options and run the following to manually trigger initial layout:
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();
To get count of each category item, you can iterate over the sort button's categories, find the no of grid-items related to that category and if it happens to be 0, perform the following for that sort button:
a) add a class disable for opacity: 0.25 for the button appearance
b) set the disabled attribute to disable button's click functionality
Here's that function will look like:
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');
}
});
};
Here's an updated code pen for a complete working example.
这篇关于jQuery同位素过滤:当网格中的数据类别中没有项目时添加一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
