Question

我尝试将元素附加到xml数据文件中。

我成功完成了onload。我追加加载一定数量的元素。

我想使用此追加功能在点击时从相同的xml数据中添加下一个元素。

为此，我添加条件if和变量。但是没有任何事情发生..

我认为我的if有问题。

我的脚本编辑工作脚本：

$(document).ready(function() {

var $container = $('#container');
var $items = $('.element');
var $filter = $('#filter a');

function initIsotope() {
    $container.isotope({
        itemSelector: $items,    
        animationOptions: {
            duration: 4000,
            easing: 'easeInOutQuad',
            queue: false
        } 
    });
        $filter.on('click', function(){
    $container.isotope({
        filter: this.getAttribute('data-option-value')
     })
    });
    $(' #container > div ').each( function() { $(this).hoverdir(); } );
}


$.get('data.xml', function (d){
        first = $(d).find("element").last().attr("id");
    last = $(d).find("element").first().attr("id");
    init();     
});

$('#next').on("click", function() {
    init(); 
        $('#container').isotope({
itemSelector: '.element',  
        });
});


function init(){

$.get('data.xml', function (d){

            var nbOfelemet = 1;
            var nbToappend = last - nbOfelemet; 
            alert(last);
            alert(nbToappend);  

$(d).find('element').each(function (){  

    if ( $(this).attr("id") <= last ) {

            var $element = $(this);
            var id = $element.attr("id");
            var size = $element.attr("size");
            var category = $element.attr("category");
            var urlpage = $element.find('urlpage').text();
            var urlimage = $element.find('urlimage').text();
            var title = $element.find('title').text();      

var $newelement = $('<div class="element '+ size +' '+category +'" id="_'+id+'"></div>').html('<a class= "link" href="' + urlpage + '"><img  src="' + urlimage + '" class="thumbnail" />' + '<div>' + '<span>' + '<i class="icon-pencil"></i>' + '&nbsp;&nbsp;' + title + '</span><span class="more">more.</span></div></a></div>');

$container.isotope( 'insert', $newelement)

var next = id;      
last = id -1 ;  
if (  first == next ) {     
$("#next-container").fadeOut(500);
}       
return ( id != nbToappend);
   }
            });
            initIsotope();      
    });
}

})

Answer 1

jQuery同位素解决方案：

如果要重建同位素堆栈，请执行以下操作：

$(selector).isotope( 'destroy' )
  .isotope( 'insert', elem-previous, null )
  .isotope( 'insert', elem-current, null )
  .isotope( 'insert', elem-next, function(){focusIsotopToCurrentId();} );

// focusIsotopToCurrentId() is an optional function if you want to
// create a callback function to focus your click on something

现在所有内容都已更正，请将以下内容放在当前插入的位置，并将变量传递给elem-previous，elem-current和elem-next。

jquery追加项（xml无限滚动）

1 个答案: