jQuery 同位素用过滤结果初始化

标签 jquery jquery-isotope

嗨,我正在使用 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>

即使我对第一个项目使用“selected”类,这些项目也不会按该标准过滤,而是显示全部。 我还应该做些什么才能让它发挥作用吗?

提前致谢。 卢

最佳答案

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

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

关于jQuery 同位素用过滤结果初始化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14139630/

相关文章:

php - HTML5 地理定位,点击时将纬度/经度传递给 PHP 变量

Javascript 执行函数 onload 但不触发按钮的 onclick 事件

javascript - 单击位于隐藏和显示的 div 之外的标签后,如何隐藏/显示标签 a

jquery - 使用 jQuery 的可拖动 <td> 内容

jQuery Isotope — 按类别排序,但指定哪个最先出现

ajax - 同位素 jQuery 库的 Minima.pl 实现?

javascript - 苹果触摸图标 : Is it possible to update on the favicon on a web-mobile app for iOS?

jquery - 使用同位素过滤和 InfiniteScroll 加载重复页面/内容

javascript - addthis、isotope 和 nicescroll 合而为一