Jquery - 如何在一页上有多个切换？答案

【问题标题】：Jquery - How to have multiple toggle on one page?Jquery - 如何在一页上有多个切换？
【发布时间】：2013-05-23 23:53:29
【问题描述】：

我是 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>

【问题讨论】：

一个页面上不能有多个具有相同id的元素。
Andrew 是对的...你可能想使用 class 而不是 id
@Andrew @Jeff - 可以！亲爱的朋友们！

标签： jquery

【解决方案1】：

Ian 的回答有效，但是您可以使用它来避免修改您的 HTML 标记。您还必须将所有 id (#) 更改为 classes (.)。

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

http://jsfiddle.net/sYPWN提供完整的工作示例

一个警告：如果你充分改变你的 HTML 标记，它可能会破坏你的 jQuery 代码。例如，如果您将切换触发器包装在另一个 div 中，则需要将 jQuery 更改为 .parent().parent() （请参阅http://jsfiddle.net/Xmvxf/1/ 第一个切换如何工作，但第二个没有）

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

【讨论】：

【解决方案2】：

在每个切换上放置一个类

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>

在您的脚本中执行此操作

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

【讨论】：

+1，也可以使用 $(this).parent().nextAll('.toggle-wrap').first().toggle('slow');这样您就不必更改 HTML 标记 jsfiddle.net/sYPWN
您的示例 Fiddle 可以工作，但不幸的是它仍然有多个切换包装 ID，使其无效。 Jeff 的解决方案非常完美。
@Jeff 您能否将您的评论作为答案，以便我打勾？ :)
@muudles 谢谢，我打算让它滑动，但我感谢支持 =] 我已经添加了我的答案。

【解决方案3】：

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

只需将第二个元素的 toggle-wrap ID 更改为其他内容，然后为该新 ID 添加一个切换。然后它会正常工作。 :)

【讨论】：