jquery - 使用同位素显示每个放大图 block 的不同内容

Question

我正在使用同位素控件放大卡片并重新布局集合。我还想在每个图 block 放大时显示不同的内容 - 每个放大的图 block 将显示不同的图形/内容。我当前使用的示例仅将类(大)与图 block 相关联，但我希望它也显示不同的内容。感谢任何帮助。谢谢。

JSFiddle: http://jsfiddle.net/DsnNX/

  $(function(){
  var $container = $('#container'),
  $items = $('.item');

  $container.isotope({
    itemSelector: '.item',
    layoutMode : 'fitColumns',
    resizesContainer : false,
    getSortData : {
      fitOrder : function( $item ) {
        var order,
            index = $item.index();

        if ( $item.hasClass('large') && index % 2 ) {
          order = index + 1.5;
        } else {
          order = index;
        }
        return order;
      }
    },
    sortBy : 'fitOrder'
  });

  $items.click(function(){
    var $this = $(this);
    // nothing to change if this already has large class
    if ( $this.hasClass('large') ) {
      return;
    }
    var $previousLargeItem = $items.filter('.large');

    $previousLargeItem.removeClass('large');
    $this.addClass('large');
    $container
      // update sort data on changed items
      .isotope('updateSortData', $this )
      .isotope('updateSortData', $previousLargeItem )
      // trigger layout and sort
      .isotope();
  });
});

Answer 1

既然您可以毫无困难地将 HTML 内容放入同位素图 block 中，为什么不简单地将内容始终放在 .item 内呢？具有 display: none 的元素然后向他们展示 .large (事件/点击)类存在吗？

<强> Here is a JSFiddle 演示了一个非常非常简单的实现。

本质上我只是将数字包裹在 span 中标签，以便可以使用 CSS 定位它们，并在每个 block 中添加一个隐藏的内容 div，其显示根据父级 .item 进行切换。元素具有 .large类。

还有一个onLayout同位素选项允许您指定每次触发布局/重新布局时调用的函数(例如，在您的情况下选择元素的任何时间)，有点像回调 - 您还可以使用它来管理更改内容事件元素，甚至只是通过 JS 动态更新内容 click您的示例中已有事件处理函数。