jQuery Isotope过滤器没有项目? [英] jQuery Isotope filter to no items?

问题描述

我正在使用同位素过滤具有多个过滤器的列表，在这种情况下，根据某些过滤器的组合可能不会显示任何项目.在这种情况下，我想向用户显示一条消息，即基于他们的过滤器参数，不存在任何结果.我将如何解决这个问题，同位素中是否内置了某种物质来处理此问题?这是一个jsfiddle示例.如果没有与过滤器设置匹配的项目，则应显示...

I'm using isotope to filter a list with multiple filters where it is possible that based on a combination of certain filters no items will be displayed. In this case I want to display a message to the user that based on their filter parameters, no results exist. How would I go about that and does isotope have something built in to handle this? Here is a jsfiddle example. should be displayed if no items match filter set...

http://jsfiddle.net/cssguru/e4vA3/

   $(function(){

   var $container = $('#container'),
      $checkboxes = $('#filters input');

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

   $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join('');
    $container.isotope({ filter: filters });
   });

   });

推荐答案

您可以看到有多少同位素项没有添加同位素隐藏"类.当结果为0时，表示所有元素都将被隐藏，并且您可以触发某些事情.您可以使用回调函数(例如reLayout)在每次过滤同位素时运行.

You can could to see how many isotope items do not have the "isotope-hidden" class added to it. When the result is 0, it means that all of your elements will be hidden and you can trigger something to happen. You could use a callback function, like reLayout to run every time the isotope gets filtered.

function noResultsCheck() {
    var numItems = $('.item:not(.isotope-hidden)').length;
    if (numItems == 0) {
        //do something here, like turn on a div, or insert a msg with jQuery's .html() function
        alert("There are no results");
    }
}

将此添加到您的更改功能:

Add this to your change function:

$container.isotope( 'reLayout', noResultsCheck );

http://jsfiddle.net/xvU8D/

这篇关于jQuery Isotope过滤器没有项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！