0

我正在尝试为 jquery 使用同位素插件所以,我有一个正在使用 jquery 1.9.1、jqueryui 1.10.1 和 bootstrap 2.3.1 开发的网站。

我正在尝试对容器进行排序甚至添加项目,但似乎没有任何效果。事件触发,同位素代码被调用,但没有任何排序,也没有添加任何项目......

这是一个带有 jquery 1.9.1 和 jquery 1.9.2 的 jsfiddle,没有引导程序......结果相同。我究竟做错了什么:

http://jsfiddle.net/w57zY/

简而言之,代码:

HTML:

<div class="isoContainer" style="background-color: transparent">
  <div class="isoItem" data-collectiontag="Cool stuff">
    <more stuff>
  </div>
  <div class="isoItem" data-collectiontag="Zippy Stuff">
    <more stuff>
  </div>
</div>

javascript:

$(function () {

  var $container = $('#isoContainer');

  $container.isotope({
      itemSelector: '.isoItem',
      animationEngine: 'best-available',
      getSortData: {
          Catname: function ($elem) {
              return $elem.attr('data-collectionTag');
          }
      }


  });

  $('#randomBtn').click(function () {
      $('#isoContainer').isotope({
          sortBy: 'random'
      });
  });

  $('#descBtn').click(function () {
      $('#isoContainer').isotope({
          sortBy: 'Catname',
          sortAscending: false
      });
  });

  $('#AddBtn').click(function () {
      var $newItems = $('<div class="isoItem"  data-collectionTag="aaa"><span        style="text-align:center">aaa</span></div> </div><div class="isoItem"  data-collectionTag="zzz"><span style="text-align:center">zzz</span></div> </div>');
      $('#isoContainer').isotope( 'insert', $newItems );


  });

});

4

1 回答 1

0
var $container = $('#isoContainer');

应该

var $container = $('.isoContainer');

由于您的 html 有一个isoContainer

<div class="isoContainer" style="background-color: transparent">

或者,您可以将 html 从 class="isoContainer" 更改为 id="isoContainer"。我认为这个行动最适合你的情况。

于 2013-03-19T15:56:05.197 回答