1

我有我正在使用 XML 和 jQuery 加载的对象，并试图连接到 Isotope，但似乎这是不行的。这可能吗？我尝试了许多不同的解决方案，但似乎找不到一个有效的解决方案。这就是我所拥有的。我在同位素中尝试了一个回调函数，但仍然没有运气。我在我的班级中使用 XML 调用，结果在萤火虫中是这样的：item yellow、item red、item blue等。

    var $container = $('#container');
    var $checkboxes = $('#filters a');

    $container.isotope({
    itemSelector: '.item',
    transformsEnabled: false,
    animationOptions: {
    duration: 4000,
    easing: 'easeInOutQuad',
    queue: false,
    complete: complete()
    }
    });


    function complete(){
           $.get('sites.xml', function (d) {

    $(d).find('site').each(function () {
        // var id = $(this).attr('id');
        var imageUrl = $(this).find('imgurl').text();
        var title = $(this).find('title').text();
        var url = $(this).find('url').text();
        var brief = $(this).find('brief').text();
        var long = $(this).find('long').text();
        var classa = $(this).find('_class').text();

    $('<div class="' + classa + '"></div>').html('<a href="' + url + '"> 
        <img  src="' + imageUrl + '" class="thumbnail" />' + '<h1>' + title + '</h1> 
        </a>').appendTo('#container');

        });

     });

        }
4

1 回答 1

2

动画完成后，您似乎正在将元素添加到容器中。我认为它必须是另一种方式：在页面准备好：

  • 做你的ajax
  • 在成功回调中将元素添加到 DOM
  • 然后初始化同位素（ajax 成功的最后一步）

编辑：在评论中回答您的问题：我不确定我是否理解您的要求。由于没有 jsfiddle 或其他东西，我不得不做出总和假设：

  • 你的容器是空的
  • 你加载一些 xml，解析它并生成你想要在同位素中拥有的元素
  • 您的代码看起来像是在一个空容器上初始化同位素 - 然后添加元素。

我的解决方案：

var $container = $('#container');
var $checkboxes = $('#filters a');

init();

function init(){
    $.get('sites.xml', function (d) {

        $(d).find('site').each(function () {
            var imageUrl = $(this).find('imgurl').text();
            var title = $(this).find('title').text();
            var url = $(this).find('url').text();
            var brief = $(this).find('brief').text();
            var long = $(this).find('long').text();
            var classa = $(this).find('_class').text();

            $('<div class="' + classa + '"></div>').html('<a href="' + url + '"> 
            <img  src="' + imageUrl + '" class="thumbnail" />' + '<h1>' + title + '</h1> 
            </a>').appendTo('#container');

            }); // end each

        initIsotop(); // after adding all elements - init isotop
    }); // end $.get
}

function initIsotop() {
    $container.isotope({
        itemSelector: '.item',
        transformsEnabled: false,    
        animationOptions: {
            duration: 4000,
            easing: 'easeInOutQuad',
            queue: false
        }
    });
}
于 2012-03-11T18:46:36.880 回答