0

非常に率直な質問:

拡張ナビゲーション用のサイドバー ( #slidercontrols) を備えた (動的な量のスライド) を備えたスライダーを作成しました。このナビゲーション サイドバーのすべての子は、対応する独自のスライドにリンクする必要があります。

私は現在、スライドごとに同じコードを繰り返すだけで問題なく動作する、非常に迅速でシンプルなセットアップで作業していますが、それが非常に厄介なソリューションであることに全員が同意すると確信しています. あまり乾燥していません。教育上の理由から、あなたのプロがこの問題をどのように解決するのか興味があります:)

#slidernavigation 子 X をスライド X に誘導する単純なループを作成するにはどうすればよいでしょうか? 私がよく知らないある種の動的セレクターが必要になるでしょう...

フィドル: http://jsfiddle.net/qbahamutp/TsJCP/

4

2 に答える 2

1

私はこれをします：

http://jsfiddle.net/9Quk7/5/

属性 rel をスライドの番号とともにスライダー コントロールに追加$.each()するか、他のロジックを使用してそれを実行します (html でインデックスを生成する、たとえばデータベースからインデックスを取得するなど)。jQuery や CSS のセレクターとしても使用できます。例えば.article[rel="1"]{ color: red !important; }

生成されたマークアップは次のようになります

<div class="article gotoslide-1 currentslide" rel="1">
                <h4>Past NedTrain bij jou?</h4>
                <p>Bekijk met welke functies en .</p>
</div>

$(this).attr('rel')onclickで使用してインデックスを取得します。

$(function(){
    $('#contentslider ul').anythingSlider({
        width            : 320,
        height            : 215,
        startStopped    : true,
        forwardText        :"&nbsp;",
        backText        :"&nbsp;",
        delay            : 6000,
        easing            : 'easeInOutExpo',
//                    buildArrows        : false,
        hasgTags        : false,
//                    appendControlsTo: "#slidercontrols",
        buildNavigation    : false
    });

    $("#slidercontrols .article").each(function(i){
        $(this).attr('rel',i+1);
    });
    // Slide navigation. 
    $("#slidercontrols .article").click(function(){
        $('#contentslider ul').anythingSlider($(this).attr('rel'), function(slider){ /* alert('Now on page ' + slider.currentPage); */ });
        $(".currentslide").removeClass("currentslide");
        $(this).addClass("currentslide");
        return false;
    });
});

$("#slidercontrols .article").live('click',...);スライドを動的に追加する予定がある場合に使用することがあります

于 2011-07-29T10:49:22.343 に答える
1

まず、セレクターを 1 つだけ使用することをお勧めします。では、インデックスを認識する方法は？多くの方法がありますが、この場合、jQuery http://api.jquery.com/jQuery.data/を使用してデータを div 要素に格納する方法が 1 つあります。

次に、任意の div をクリックすると、保存されたデータからインデックスを取得して使用するだけです。

div が常にインデックス順であることがわかっている場合は、.index() も使用できます。.index() の例http://jsfiddle.net/TsJCP/1/

于 2011-07-29T10:28:47.423 に答える