Question

我正在尝试将isotope插件用于jquery 所以，我有一个我用jquery 1.9.1，jqueryui 1.10.1和bootstrap 2.3.1开发的网站。

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

这是一个jsfiddle与jquery 1.9.1和jquery 1.9.2，没有bootstrap ...相同的结果。我做错了什么：

代码简而言之：

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 );


  });

}）;

Answer 1

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

应该是

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

由于您的html有类 isoContainer

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

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

jquery插件Isotope似乎不起作用。我究竟做错了什么？

1 个答案: