【问题标题】:Isotope sort callback function同位素排序回调函数
【发布时间】:2014-09-19 18:51:18
【问题描述】:

我正在使用 Isotope jquery 插件按名称或日期对列表中的多个文件进行排序。同位素函数运行完美,但我需要在排序后运行一个回调函数,我不知道在哪里触发它。

这是我目前的同位素代码:

function animationFinished() {
    $('#isotope-container a').each(function(index, element) {
        var top = parseInt($(element).css('top')); console.log(top);
    });
}

var $container = $('#isotope-container').isotope({
    getSortData: {
        name: '[title]',
        date: function( itemElem ) { // function
          var date = $( itemElem ).attr('year');
          return parseInt(date);
        }
    }
});
$('#sorting').change( function() {
    //console.log('click');
    var sortByValue = $(this).find('option:selected').attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
});

这是它正在排序的 html 的一个小例子

<div id="sorts" class="button-group">
  <p>Sort by:
  <select id="sorting">
    <option data-sort-by="name">Name</option>
    <option data-sort-by="date">Date</option>
  </select></p>
</div>

<div id="isotope-container">
<a title="Army Corps of Engineers" year="2009" href="/army-corp-of-engineers-tom-river-rehab-nj-2009/">Army Corp of Engineers</a>
<a year="1999" title="Bolted Steel NSF Tank A6 &amp; A7" href="/bolted-steel-nsf-tank-a6-a7-houston-1999/">Bolted Steel</a>
<a year="1998" title="Brick Manhole Raven 405" href="/brick-manhole-raven-405-charleston-1998/">Brick Manhole</a>
<a year="9999" title="Wetwell Vault Rehab" href="/wetwell-vault-rehab/">Wetwell Vault</a>
</div>

【问题讨论】:

    标签: javascript jquery jquery-isotope


    【解决方案1】:

    同位素 v2

    http://isotope.metafizzy.co/events.html

    $container.isotope( 'on', 'layoutComplete', function(){ … } ); //only set this up once
    
    $container.isotope({ sortBy: sortByValue });
    

    同位素 v1

    http://isotope.metafizzy.co/v1/tests/callbacks.html

    $container.isotope({ sortBy: sortByValue }, function(){ … });
    

    【讨论】:

    • 我做到了。我试过你放的东西,但它不起作用。排序发生了,但函数没有被调用。
    • 确保您至少拥有 isotope.js 的最新版本:isotope.metafizzy.co/v1/jquery.isotope.min.js
    • 嗬,我明白了,你能用 v1.5.26 吗?否则我们必须找到版本为 2.0.1 的文档
    • 我在这里为你准备了一些东西:$container.isotope('on', 'layoutComplete', function() {...})
    猜你喜欢
    • 1970-01-01
    • 2013-07-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-16
    • 2019-05-11
    相关资源
    最近更新 更多