同位素更新到 V2，如何切换大小和布局

Question

http://bit.ly/19GXxDy 在过滤器的 Etc 部分下，有一个 toggle size 功能。使用这个我们制作了一个页面作为基本示例来构建一个带有投资组合矢量徽标的 HTML 页面，使用站点示例升级到 V2 失败。我们是否使用了错误的方法？

发生了什么变化，我们做错了什么。我们正在尝试升级到 V2，但无法获得在 V2 中工作的相同切换磁贴大小，

  // V1 toggle variable sizes of all elements
  $('#toggle-sizes').find('a').click(function(){
    $container
      .toggleClass('variable-sizes')
      .isotope('reLayout');
    return false;
  });





  // in V2 change size of all item by toggling class, doesnt work
 $container.on( 'click', function() {
    $(this).toggleClass('variable-sizes');
    $container.isotope('layout');
 });

Answer 1

我假设您已经在代码中定义了变量 $container ？您的 v2 代码似乎发生了什么，您点击 $container 切换 class 'variable-sizes'，在 $container 本身上，这是您代码中的 $(this)，而不是您的 link 'a'。

您想这样做：

$container.on( 'click','a', function() {
$(this).toggleClass('variable-sizes');
$container.isotope('layout');
});

您在 jsfiddle 中的代码示例会更有帮助地回答您的问题。

同位素更新到 V2，如何切换大小和布局

Isotope updating to V2, how to toggle size and layot

javascript

jquery

html

jquery-isotope