Question

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

Answer 1

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

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

http://jsfiddle.net/sYPWN

提供完整的工作示例

有一点需要注意：如果您确实更改了HTML标记，则可能会破坏您的jQuery代码。例如，如果将toggle-trigger包装在另一个div中，则需要将jQuery更改为.parent（）。parent（）（请参阅http://jsfiddle.net/Xmvxf/1/第一个切换如何工作，但第二个切换不工作）

我确信你明白了，所以你应该能够根据自己的需要进行修改。

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

Answer 3

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

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

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

3 个答案: