1

jquery スライドショー ( slides )にアイテムを追加しようとしていますが、更新する方法が見つかりません。私はこの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

Slides の最新バージョン ( 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 .live()メソッドは、jQuery 1.7 で非推奨になりました。いずれにせよ、この例ではイベントの委譲は必要ありませんでしたが、必要な場合は、新しい構文を使用する必要があります。

$(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 に答える