Jquery - 如何在一个页面上进行多次切换？ [英] Jquery - How to have multiple toggle on one page?

问题描述

我是Jquery的新手，我能够整理一个简单的切换脚本。但我很失望地发现它不适用于一页上的多次切换。

I'm new to Jquery and I was able to put together a simple toggle script. But I was disappointed to find out that it won't work with multiple toggles on one page.

我最多可能有20次切换。

I will potentially have up to 20 toggles.

1. 有没有办法让这个工作
   而不为每个切换创建一个新的点击
   功能？

1. Is there a way to make this work without creating a new click function for each toggle?

现在当你将光标移到
切换触发器上时，它不会变成
手。如何将光标
转换为手？

Right now when you cursor over the toggle trigger it doesn't turn into a hand. How would I turn the cursor into a hand?

以下是代码：

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

推荐答案

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

Ian's answer works, however you can use this to avoid modifying your HTML markup. You'll have to change all of your ids (#) to classes (.) as well.

$(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/ 第一个切换如何工作，但第二个切换T）

One caveat: If you DO change your HTML markup sufficently, it may break your jQuery code. For instance, if you wrap your toggle-trigger in another div, you will need to change your jQuery to .parent().parent() (see http://jsfiddle.net/Xmvxf/1/ how the first toggle works, but the second doesn't)

我敢肯定你的想法，所以你应该能够修改此来满足您的需求。

I'm sure you get the idea, so you should be able to modify this to suit your needs.

这篇关于Jquery - 如何在一个页面上进行多次切换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！