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; 
});

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

我试过了，但没有用。

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

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

});

如果您对如何使其与第 n 个孩子一起工作或以不同的方式进行工作有任何想法，那就太好了。

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 回答