Jquery-如何在一个页面上进行多个切换？

我是Jquery新手，我能够编写一个简单的切换脚本。但我很失望地发现它不能在一个页面上使用多个切换

我可能会有多达20个开关

有没有办法让这一切顺利 不创建新的单击 每个切换的功能

现在，当您将光标悬停在 切换触发器，它不会变成 一只手。我如何转动光标 变成一只手

代码如下：

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#toggle-trigger").click(function() {
        $("#toggle-wrap").toggle('slow');
    });
});
</script>

<p><a id="toggle-trigger">Click to toggle</a><p>
<div id="toggle-wrap">
    <div class="style-single">
        Random Text
    </div>
</div>


<p><a id="toggle-trigger">Click to toggle 2</a><p>
<div id="toggle-wrap">
    <div class="style-single">
        This doesn't work :(
    </div>
</div>

$（文档）.ready（函数（）{
$（“#切换触发器”）。单击（函数（）{
$（“#切换换行”）.toggle（'slow'）；
});
});
单击以切换
随机文本
单击以切换2
这不起作用：(

它不起作用的原因是它使用ID来区分元素的状态。正确的HTML不应该有多个具有相同ID的元素；它是无效的

---

只需将第二个元素的toggle wrap ID更改为其他内容，然后为该新ID添加一个toggle。这样它就可以正常工作。：）

为每个toggle添加一个类

ex
<a id="toggle-trigger1" class="trigger">Click to toggle</a>
<a id="toggle-trigger2" class="trigger">Click to toggle</a>
<a id="toggle-trigger3" class="trigger">Click to toggle</a>

---

Ian的答案是可行的，但是您可以使用它来避免修改HTML标记。您还必须将所有ID（#）更改为类（.）

完整的工作示例可在

一个警告：如果您对HTML标记做了足够的更改，它可能会破坏您的jQuery代码。例如，如果将切换触发器包装在另一个div中，则需要将jQuery更改为.parent（）.parent（）（请参见第一个切换的工作原理，但第二个没有）

---

我相信你明白了，所以你应该能够修改它以满足你的需要。

你不能在一个页面上有多个元素具有相同的

id

。安德鲁是对的。。。您可能希望使用类而不是id@Andrew@Jeff-好的就行了！谢天谢地，朋友们+1，还可以使用$（this）.parent（）.nextAll（'.toggle wrap'）.first（）.toggle（'slow'）；因此，您不必更改您的示例Fiddle工作的HTML标记，但不幸的是，它仍然有多个toggle wrap ID，这使得它无效。杰夫的解决方案是完美的。@杰夫，你能把你的评论作为一个答案，这样我就可以勾选它了吗？：）@muudles谢谢，我本想让它溜走的，但我感谢大家的支持=]我已经添加了我的答案。

$(".trigger").click(function() {
    //code here
});

$(document).ready(function() {
    $(".toggle-trigger").click(function() {
        $(this).parent().nextAll('.toggle-wrap').first().toggle('slow');
    });
});