jQuery切换div-如何使用多个ID进行此操作？

Question

我是Jquery新手。 我的设置如下：

我有一系列的div，它们需要能够被切换（显示隐藏和显示）。 每个div都有可以执行的动作，因此需要唯一的ID才能知道事件来自哪个div。

要切换div，我为每个div有一个按钮（该按钮不在要切换的div内）。

现在没有jQuery，我使用按钮的onclick事件传递要切换的相应div的ID。 使用唯一ID，我可以执行以下操作：

function toggleFlag(divId) {
    var div = document.getElementById(divId);
    div.style.display = (div.style.display=="block" ? "none" : "block");
}

divId是唯一的，因此如果在div中执行操作，我也知道事件从何而来。

锚代码看起来像这样：

onclick="toggleFlag('id-111');"

其中“ 111”是唯一ID

首先，如果我的javascsript的范围没有那么复杂（除了可能的简单ajax），使用jquery甚至值得这样做。

更重要的是，如何使用jquery正确完成此操作？

更新：我非常接近解决这个问题。 我设法使用下面的建议之一使其工作，每个按钮都需要唯一的类名。 有两种方法建议所有按钮的类名都相同的实现（我希望这样做是为了能够将样式静态地分配给按钮类），但是我无法使它们起作用。 有人可以详细说明解决方案吗？ 谢谢！

Answer 1

您可以执行以下操作：

HTML：

<button id="btnId1" class="divId1" value="Click me to toggle divId1"/>
<button id="btnId2" class="divId2" value="Click me to toggle divId2"/>
etc...

<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...

脚本：

$(function() {
    $("button").click(function() { 
        var divId = $(this).attr("class");
        $("#" + divId).toggle();
    });
});

这种方法的优点是，所有按钮仅定义一次事件。 您还可以使用另一种策略将div id存储在按钮信息中，例如非标准属性-jQuery也可以选择该属性，或者使div id成为按钮id的一部分，如下所示：

<button id="btn_divId1" value="Click me to toggle divId1"/>
<div id="divId1">div 1</div>

然后从单击的按钮的ID中提取div的ID（个人，这是我要采取的方法）

希望这可以帮助

编辑：要回答第一个问题，是的，您会从jQuery中受益，因为它会缩短您正在编写的代码量，并且可以让您轻松地将事件分配给按钮，这是一件好事:)

编辑2：使用非标准属性：

HTML：

<button id="btnId1" divid="divId1" class="btnToggle" value="Click me to toggle divId1"/>
<button id="btnId2" divid="divId2" class="btnToggle" value="Click me to toggle divId2"/>
etc...

<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...

脚本：

$(function() {
    $("button").click(function() { 
        var divId = $(this).attr("divid");
        $("#" + divId).toggle();
    });
});

Answer 2

假设您将锚构建为具有与要切换的DIV的ID相对应的ID，并且它们都具有共同的CSS类。 例如，

<a href="#" id="a_111" class="toggleButton">Toggle</a>
<div id="d_111">Some stuff.</div>

现在，您可以使用jQuery轻松为所有这些构建单击处理程序。

$(function() {
    $('a.toggleButton').click( function() {
        var divId = $(this).attr('id').replace(/a_/,'d_');
        $(divId).toggle();
    });
});