Question

我正在尝试将一个函数添加到我的代码的click事件中。顺便说一句，这是使用Isotope.js，一个非常酷的jQuery工具。

因此，以下代码的工作方式如下：点击<ul>中的数据过滤器链接会触发同位素。这将使用与data-filter参数匹配的各种<li>填充页面。一切都好。

但是我有额外的代码来修改一个<li>的大小所以我需要同位素来点击任何<li>来触发以下内容 - Isotope是一个使用砌体的动态页面布局工具。

.isotope( 'reLayout', callback )

其中重置布局属性并布置每个item元素。见 - isotope.js relayout

我认为我只需要另一段脚本代码，当点击<li>时触发重放功能。

这就是我的......

<ul><a class="black" href="#" data-filter=".'.$folder.'">'.$folder.'</a> </ul>';

<li><a href="'.$file.'">'.rtrim($name,'.mp3').'</a></li>;

<script>
  $('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#container').isotope({ filter: selector });
  return false;
});

$('#container').isotope({
  masonry : {
    columnWidth : 1
  }

 }); 
</script>

Answer 1

      // change size of clicked element
      $container.delegate( '.element', 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
      });

这是代码http://isotope.metafizzy.co/demos/relayout.html页面，当它们完全按照您要执行的操作时使用。同样的方法应该对你有用。

所以$ container将是你的$（“＃container”），而.element将与容器中的元素相同。这会添加或删除类“大”类，“大”类具有css，这使得该元素的大小更大。然后你注意到同位素被称为“重新布局”。

如何在Isotope.js的链接上点击事件？

1 个答案: