0

我在使用同位素过滤器菜单时遇到了一些问题。我需要它根据时间戳加载信息并允许过滤。不幸的是，我的 sortBy 脚本与过滤器脚本有冲突。

这是有问题的js：

排序代码：

$('.showcase').isotope({
    itemSelector: '.item',
    getSortData: {
        date: function ($elem) {
            return $elem.attr('data-timestamp');
        }
    },
    sortBy: 'date',
    sortAscending: true,
    masonry: {
        columnWidth: 1
    }
});

筛选菜单代码：

// filter container
var $container = $('.showcase');
$container.isotope({
    itemSelector: '.thumb'
});
var $optionSets = $('.filter'),
    $optionLinks = $optionSets.find('a');
$optionLinks.click(function () {
    var $this = $(this);
    // don't proceed if already selected
    if ($this.hasClass('selected')) {
        return false;
    }
    var $optionSet = $this.parents('.dropdown');
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    // make option object dynamically, i.e. { filter: '.my-filter-class' }
    var options = {},
    key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');
    // parse 'false' as false boolean
    value = value === 'false' ? false : value;
    options[key] = value;
    if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
        // changes in layout modes need extra logic
        changeLayoutMode($this, options)
    } else {
        // otherwise, apply new options
        $container.isotope(options);
    }
    return false;
});

这是一个正常运行的 jsfiddle：http: //jsfiddle.net/3ngjL/2/

这两个代码块单独工作，但不能一起工作。如果有人可以提供一些见解，我将不胜感激。

4

1 回答 1

0

我想到了...

在“sortBy”代码块中，我声明了同位素容器：

$('.showcase').isotope({

然后在过滤器代码中再次命名：

var $container = $('.showcase');
    $container.isotope({
});

我通过这样做来修复它：

var $container = $('.showcase');
  $container.isotope({
    itemSelector : '.thumb',
    getSortData : {
      date : function ( $elem ) {
        return $elem.attr('data-timestamp');
      }
    },
    sortBy : 'date',
    sortAscending : true
  });

这是工作代码的更新小提琴：http: //jsfiddle.net/3ngjL/3/

于 2013-08-15T16:20:43.037 回答