0

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

所以下面的代码工作如下：点击<ul>火同位素中的数据过滤器链接。<li>这会使用与 data-filter 参数匹配的各种内容填充页面。都好。

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

.isotope( 'reLayout', callback )

这会重置布局属性并布局每个项目元素。请参阅 - isotope.js 重新布局

我想我只需要另一段代码用于在单击 an 时触发重新布局功能的脚本<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>
4

1 回答 1

4 
      // 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，这使该元素具有更大的大小。然后正如您所指出的，同位素被称为“relayout”。

于 2011-10-17T20:31:38.830 回答