Question

我正在使用Elastislide carousel插件，并从具有图像路径的表中动态添加图像。现在我使用jQuery将列表项追加到Elastislide的无序列表中。

问题是，在Elastislide的CSS中，显示设置为无（我在CSS文件中检查过），当它们被渲染时，它们会正确显示。

当我动态添加列表项时，它们不会显示。我还在猜他们的CSS 显示为无。

以下是我用于附加到列表项的代码。

$(document).ready(function () {
     $('#aspnetGridView tr').each(function () {
         if (!this.rowIndex) return; // skip first row
         var path = this.cells[0].innerHTML;
         alert(path);
         $('#rack1 #carousel').append('<li><a href="#"><img src="'+ path +'" alt="image03" /></a></li>');
    });
});

这里是添加静态列表项的地方。

<div id="rack1"><ul id="carousel"  class="elastislide-list">
<li><a href="#"><img src="images/bookCover/java2.jpg" alt="image05" /></a></li></ul></div>

这就是在渲染页面后如何显示轮播中的静态项目。我用萤火虫检查了这个。

<li style="width: 33.2418%; max-width: 65px; max-height: 76px;"><a href="#"><img src="images/bookCover/aspnetDesign.jpg"></a>

请帮助我，告诉我我做错了什么。这是使用JavaScript的定位吗？

Answer 1

如果您使用的轮播是我在其他几个插件中看到的，那么问题实际上是缓存问题。当页面加载时，插件会创建一个内存数组，其中包含需要循环的所有项目，然后使用这些项目来确定要显示的内容。因此，当您向标记添加新项目时，它们不会包含在插件所知的“幻灯片”数组中，因为它们在初始化时不属于DOM。

我会在检查您正在使用的插件的文档后对此进行修改，但希望这可以让您在同时解决一些问题。

修改

看起来你只是错过了一个（不可否认的重要）步骤。您需要在附加项目后致电.add()。所以，添加：

$('#rack1 #carousel').add();

你应该是好的（参考：http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/）。

无法使用Jquery动态添加Li用于轮播

1 个答案: