5

特定のフィルターの組み合わせに基づいてアイテムが表示されない可能性がある複数のフィルターでリストをフィルタリングするために同位体を使用しています。この場合、フィルター パラメーターに基づいて、結果が存在しないというメッセージをユーザーに表示したいと考えています。どうすればそれを行うことができますか?アイソトープにはこれを処理するためのものが組み込まれていますか? これはjsfiddleの例です。フィルタ セットに一致するアイテムがない場合に表示する必要があります...

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 });
   });

   });
4

4 に答える 4

8

「同位体非表示」クラスが追加されていない同位体アイテムがいくつあるかを確認できます。結果が0の場合、すべての要素が非表示になり、何かが発生するようにトリガーできることを意味します。reLayoutなどのコールバック関数を使用して、同位体がフィルタリングされるたびに実行できます。

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");
    }
}

これを変更関数に追加します。

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

http://jsfiddle.net/xvU8D/

于 2013-01-30T15:37:21.893 に答える
4

nspaceが言ったことに追加するだけです...

「reLayout」コールバックを追加する必要はありません。次の$container.isotope({ filter: filters });ように、既にここにあるコードでコールバックを作成できます。

$container.isotope({ filter: filters }, function noResultsCheck() {
    var numItems = $('.item:not(.isotope-hidden)').length;
        if (numItems == 0) {
        alert("There are no results");
    }
});

http://jsfiddle.net/xvU8D/33/

これは、次のドキュメントから取得したものです: http://isotope.metafizzy.co/docs/introduction.html#script - 「callback」のページ検索を行います。

于 2013-08-05T04:51:21.030 に答える