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

SCRIPT：

$(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...

SCRIPT：

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

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

2 个答案: