Question

我感兴趣的是将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; 
});

我不想为每个滑块按钮创建一个jQuery命令，而是希望有一个命令使每个按钮成为活动链接。我认为如果我可以使用无数个实例来使用nthchild就行了。

我尝试过这个并没有用。

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

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

});

如果你对如何让它与nthchild一起工作有任何想法或者以不同的方式去做，那就太棒了。

Answer 1

$('#nav ul li').on('click', function(){   //select all list elements
    $('#slides').cycle($(this).index()+1);//index is zero based
    return false;
});

Answer 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比使用索引更可靠：你可以在这种方式之间使用其他元素。

无数个实例的第n个子节点

2 个答案: