javascript - 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 内执行操作，我也知道事件来自哪里。

anchor 代码看起来像这样:

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

其中“111”是唯一 ID

首先，如果我的 javascsript 的范围不是更复杂(除了简单的 ajax 之外)，是否值得使用 jquery 来实现此目的。

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

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

Answer 1

假设您构建的 anchor 具有与要切换的 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();
    });
});