【问题标题】:Isotope adding a class to first 3 items (onload, filtered)同位素为前 3 个项目添加一个类别(加载、过滤)
【发布时间】:2015-02-12 06:04:55
【问题描述】:

我正在尝试在布局最初加载时为前 3 个项目添加一个类,并且每次它根据选定的过滤器进行更改。

$container.isotope( 'on', 'layoutComplete',
    function( isoInstance, laidOutItems ) {

        // no results
        if ( !laidOutItems.length ) {
            $('.message').fadeIn('slow');
        } else {
            $('.message').fadeOut('fast');
        }

        // add popular class to first 3 items
        $('.item').find('.well').removeClass('popular');
        $('.item:lt(3)').find('.well').addClass('popular');
    }
);

以上内容仅影响页面上硬编码的项目。我无法从布局中的所有项目中删除该类,然后将其添加到前 3 个过滤项目中。

【问题讨论】:

    标签: jquery-isotope


    【解决方案1】:

    您可以使用它们的类来定位隐藏元素和可见元素。因此,首先您将为过滤的元素添加和删除隐藏类,如下所示:

    var itemReveal = Isotope.Item.prototype.reveal;
    Isotope.Item.prototype.reveal = function() {
      itemReveal.apply( this, arguments );
      $( this.element ).removeClass('isotope-hidden');
    };
    
    var itemHide = Isotope.Item.prototype.hide;
    Isotope.Item.prototype.hide = function() {
      itemHide.apply( this, arguments );
      $( this.element ).addClass('isotope-hidden');
    };
    

    一旦您知道什么是可见的和不可见的,您就可以对可见的项目使用:lt(3)').

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-04-01
      • 2017-05-24
      • 2011-06-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-02
      相关资源
      最近更新 更多