【问题标题】:jQuery isotope initialize with filtered results使用过滤结果初始化 jQuery 同位素
【发布时间】:2013-01-03 13:11:34
【问题描述】:

您好,我正在使用 jQuery Isotope,我有一个像这样的过滤器:

<ul class="filter option-set " data-filter-group="date">        
   <li><a class="selected" href="#filter-date-January" data-filter-value=".January">January</a></li>
   <li><a href="#filter-date-April" data-filter-value=".April" class="">April</a></li>
   <li><a href="#filter-date-any" data-filter-value="" class="">ALL</a></li>
 </ul>

即使我对第一个项目使用“选定”类,但项目并未按该条件过滤,而是显示全部。 我还应该做些什么来让它发挥作用吗?

提前致谢。 陆

【问题讨论】:

    标签: jquery jquery-isotope


    【解决方案1】:

    您可以拆分初始化和过滤。 我更愿意在单独的函数中处理过滤,即:

    $(function() {
       // isotope init
       $(container).isotope({
           itemSelector: '.item',
           animationOptions: {
               duration: 750,
               easing: 'linear',
               queue: false
           }
       });
    
       filterItems(); // filter onload
    
    });
    
    var selectedDate = '.January'; // update this var with your UI
    
    var filterItems = function() {
        $('ul.option-set li a').each(function(i, a) {
            if($(a).data('filter-value') == selectedDate) {
                $(a).addClass('selected');
            }
            else {
                $(a).removeClass('selected');
            }
        }); 
       $container.isotope({
            filter: '.selected',
            isAnimate: true
        });
    };
    

    【讨论】:

    • 感谢您的回答。如何将其用于组合过滤器?我按日期和类型过滤。
    • 太棒了!谢谢。我更改了将所选类添加到项目而不是过滤器的功能,它起作用了。
    猜你喜欢
    • 1970-01-01
    • 2012-02-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-30
    • 2012-11-22
    • 2019-10-20
    相关资源
    最近更新 更多