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