1

メニューに投稿タイトルをロードするページを作成しました。タイトルをクリックすると、コンテンツがdivに投稿されます。コンテンツの一部は、jqueryサイクルスクリプトを含むdivです。したがって、すべてのページには独自のスライダーがあり、独自の画像と独自のページャーがあります。

問題：ポケットベルには、表示されていないスライドも含め、ページ上のすべてのスライドのボタンが表示されます。たとえば、スライダー付きの投稿が3つあり、投稿1のスライダーに2つの画像があり、投稿2のスライダーに3つの画像があり、投稿3のスライダーにも2つの画像があります。次に、ポケットベルには、すべてのスライダーに7つのボタンが表示されます。

以前は、投稿がクリックされるたびに複製されていたので、私が考えているwhileループで何かをしなければなりません。これは私のjqueryです

// Displaying content for selected category
$('ul.cats li.trigger').click(function(){
    var openMainContent = $(this).attr('rel');

    $('.the-content#'+openMainContent).show(); 
    $('.the-content').not('#'+openMainContent).hide();
    $('.img-slider').cycle('destroy');

    // Image slider
    $('.img-slider')
        .before('<div id="slider-nav" class="slider-nav">') 
        .cycle({ 
            fx:     'fade',
            timeout: 0,
            pager:  '#slider-nav'
    });
});

何がこれを実現すると思いますか？

4

2 に答える 2

1

新しいものだけでサイクルプラグインを初期化してみます。このようなもの（ただし、テストしていません）：

// We need a way to distinguish navigation wrappers from one another, so we use a counter
var nav_count = 0;
// Displaying content for selected category
$('ul.cats li.trigger').click(function(){
    var openMainContent = $(this).attr('rel');

    $('.the-content#'+openMainContent).show(); 
    $('.the-content').not('#'+openMainContent).hide();

    // Image slider
    $('.img-slider:not(.img-slider-initialized)').each(function(){
        $(this).before('<div id="slider-nav-' + nav_count + '" class="slider-nav">') 
            .cycle({ 
                fx:     'fade',
                timeout: 0,
                pager:  '#slider-nav-' + nav_count
        }).addClass('img-slider-initialized');
        nav_count ++;
    })
});

それをテストして、それが機能するかどうかを確認できますか?

于 2012-11-15T10:31:09.730 に答える
0

推測:メソッドは終了タグを に.before()追加しますか? htmlが壊れる可能性があります。</div>id="slider-nav"

于 2012-11-15T10:33:07.390 に答える