0

我尝试从 xml 数据文件中追加元素。

我成功地做到了。我在加载时附加了一定数量的元素。

我想使用此附加功能在单击时从相同的 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();      
    });
}

})
4

1 回答 1

0

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.

于 2013-04-02T21:38:58.063 回答