Javascript jquery切换一个div-如何使用多个ID进行切换？

我不熟悉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实现这一点

---

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

您可以这样做：

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

HTML:

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

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

---

假设您构建的锚具有一个与要切换的DIV的id相对应的id，并且它们都具有一个公共CSS类。比如说,

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

---

我有点喜欢这种方法，因为它允许我为所有按钮定义一个单独的类…但是我似乎无法让它工作…Darko Z的方法工作，但每个按钮都有一个不同的类…我会再试一次，但可能在某个地方有一个小错误（我对jquery非常陌生）thanksjsguy，在tvanfosson代码中，假设您的DIV ID和按钮/链接ID遵循特定的模式。例如，如果您的链接id是a_111，则您的DIV id必须是DIV_111。如果这个条件得到满足，如果你点击链接a_111，他的代码就会切换到div_111。谢谢，我想也许你的第二种方法是我理想的选择。正如我对tvanfosson所说的，我希望每个按钮（或锚）都有相同的类，这样我就可以静态地为它们分配样式。第一个方法需要唯一的类名。你可以详细介绍一下你的第二个解决方案吗，因为我对jquery非常陌生？非常感谢你

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

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

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