2

在我描述我的问题之前，我想准确概述我正在尝试的内容

我在这里要做的是根据用户可以按下的按钮将不同的项目集加载到内容流中。我已经设置了一个由按钮触发的函数，它将获取与我通过 AJAX（使用 jQuery $.get）传递给它的名称值关联的项目，并放入一个 ID 为 itemcontainer 的 div。这很好用。

function getPictures(Gallery){
$.get( "getimages.php", {name : Gallery}, function( data ) {
for(x in data){
    $("#itemcontainer").append(data[x]);
}
addPictures();
}, "json" );
return false;

}

您将看到该函数调用了其中的另一个函数 ( addPictures() )，该函数实际上通过 ContentFlow 的 addItem 方法将图片从具有 itemcontainer ID 的 div 添加到 ContentFlow 轮播中。

     function addPictures(){ 
        clearBox();
        var it = ajax_cf.items;
        // Grabs pictures from 'itemcontainer' and iteratively adds them to 'flow'
        var ic = document.getElementById('itemcontainer');
        var is = ic.getElementsByTagName('img');
        for (var i=0; i< is.length; i++) {
          ajax_cf.addItem(is[i],"end");
        } 
      }

您会注意到 addPictures() 函数内部有一个我之前声明的名为 clearBox() 的函数。clearBox() 应该遍历我的内容流中的项目并删除它们，这样我就可以在加载新项目之前删除 ContentFlow 轮播中的旧项目库。

它通过循环遍历列表项（称为项）来工作，这是 ContentFlow 对象 ajax_cf 的一个属性，我为每个项在索引 0 处的列表元素上创建并运行方法 rmItem。这是 clearBox 函数。

 var ajax_cf = new ContentFlow('ajax_cf');
      function clearBox(){
        alert("clear");
        var it = ajax_cf.items;
        var len = it.length;
        for(var i=0; i<len; i++){
         ajax_cf.rmItem(0);
        } 
        return false;
      }

如果您愿意，可以在此处获取源代码或文档。 http://www.jacksasylum.eu/ContentFlow/

提前致谢！

4

1 回答 1

0

我不知道你是否已经解决了这个问题，但这里有一个想法。由于这些对象位于 DOM 中，请尝试让您的clearBox()方法删除itemcontainer. 所以你的方法可能看起来像：

function clearBox()
{
    alert("clear");
    var images = $('itemcontainer').children();

    for (var i = 0; i < images.length; i++)
    {
        $('itemcontainer').remove(images[i]);
    }
}

这样，您将强制 ContentFlow 对象删除图像，并且当您的addPictures方法继续时，它将基本上重新初始化 ContentFlow 轮播。

这是未经测试的，但从逻辑上看它会起作用，因为 ContentFlow 库的所有rmItem方法都是从 DOM 中删除对象，因此您选择自己做。

于 2014-03-08T17:24:13.087 回答