1

我正在尝试将项目添加到 jquery 幻灯片（幻灯片），但我找不到刷新它的方法。我有这个 html 代码：

<a class='add' href='#'>add slide</a>

<div id="slides">   
    <div class="slides_container">    
            <h1>Slide 1</h1>       
            <h1>Slide 2</h1>       
            <h1>Slide 3</h1>       
            <h1>Slide 4</h1>       
            <h1>Slide 5</h1>       
   </div>
</div>

这个js：

$(function() {
    $("#slides").slides();

    $('.add').live('click', (function() {
        $('.slides_control').append('<h1>Slide added</h1>');
        // note: slides_control div is added by the slides plugin automatically and is the real container of the items.
        return false;
    }));

});

演示在小提琴中

我需要重新加载幻灯片以显示新数据，但我找不到办法。

4

2 回答 2

2

最新版本的幻灯片（参见 Github）实际上确实有一个功能slides('update')，但当前版本还没有。

与此同时，你可以使用这个小技巧：

$("#slides").slides();

$('.add').on('click', function() {
    var children = $('#slides .slides_control').children();
    var newContainer = $('<div class="slides_container" />');
    var slides = $('#slides');

    slides.empty().append(newContainer);
    newContainer.append(children);
    newContainer.append('<div><h1>New slide</h1></div>');

    slides.slides();

    return false;
});

你可以在这里玩：http: //jsfiddle.net/R7zvM/

请注意，在生产代码中使用它之前，您可能应该进行一些测试。它看起来很稳定，但你的里程可能会有所不同。

PS自jQuery 1.7 起， .live()方法已被弃用。在这个例子中，你不需要事件委托，但是如果你需要，你应该使用新的语法：

$(document).on('click', 'a.add', function() {
    console.log('Do something');
});
于 2011-12-23T15:44:46.607 回答
0

尝试$("#slides").slides("update");

于 2011-12-23T12:14:00.520 回答