0

無限の数のインスタンスに対して nthchild コマンドを使用することに興味があります。jQuery でスライダーを作成し、下部に各スライドのナビゲーション ボタンを作成しました。

<div id="nav">
    <ul>
        <li id="button1"></li>
        <li id="button2"></li>
        <li id="button3"></li>
    </ul>
</div>

現在、jQuery を使用して、このコードとサイクル プラグインを使用して選択したボタンをクリックして、選択したスライドに進みます。

$('#button1').click(function() { 
    $('#slides').cycle(0); 
    return false; 
}); 
$('#button2').click(function() { 
    $('#slides').cycle(1); 
    return false; 
});  
$('#button3').click(function() { 
    $('#slides').cycle(2); 
    return false; 
});

スライダー ボタンごとに 1 つの jQuery コマンドを作成する代わりに、それぞれをアクティブなリンクにする 1 つのコマンドが必要です。無数のインスタンスでできるならnthchildを使えばうまくいくと思いました。

これを試してみましたが、うまくいきませんでした。

$('#nav ul li:nth-child(n)').click(function(){

    $('#slides').cycle(n);
    return false;

});

nthchild で動作させる方法や別の方法について何か考えがあれば、それは素晴らしいことです。

4

2 に答える 2

4 
$('#nav ul li').on('click', function(){   //select all list elements
    $('#slides').cycle($(this).index()+1);//index is zero based
    return false;
});
于 2013-01-06T19:19:20.667 に答える
2

これを使用できます：

$('li[id^="button"]').click(function() { 
    $('#slides').cycle(parseInt(this.id.slice(6),10)-1); // extracts the number from the id
    return false; 
});

'[id^="button"]'id が で始まるすべての要素を選択しますbutton。

id を使用すると、 index を使用するよりも信頼性が高くなります。この方法で他の要素を間に入れることができます。

于 2013-01-06T19:17:27.313 に答える