如何將各個按鈕與各個div相關聯？

Question

我試圖建立一個網頁，其中有一個按鈕列表，每個按鈕都在其下面切換div的可見性。

我遇到的問題是我所有的按鈕都只能切換頁面中最后一個div的可見性。

以下是相關代碼：

HTML

<div class="menuItem">
    <button>Food Item</button>
    <div class="info">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img src="../images/menu/spaghetti.jpg" alt="spaghetti">
    </div>
</div>
<div class="menuItem">
    <button>Food Item</button>
    <div class="info">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img src="../images/menu/spaghetti.jpg" alt="spaghetti">
    </div>
</div>
<div class="menuItem">
    <button>Food Item</button>
    <div class="info">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img src="../images/menu/spaghetti.jpg" alt="spaghetti">
    </div>
</div>

這是我的JavaScript：

"use strict";

(function() {
    var menuItems = document.getElementsByClassName("menuItem");

    for(var ii = 0; ii < menuItems.length; ii++) {
        var button = menuItems[ii].getElementsByTagName("button")[0];
        var info = menuItems[ii].getElementsByClassName("info")[0];
        button.onclick = function() {
            if(info.style.display === "block") {
                info.style.display = "none";
            } else {
                info.style.display = "block";
            }
        };
    }
})();

我不認為我完全理解javascript的功能。 我想我正在獲取每個按鈕的引用，但是當我為一個按鈕更改onclick方法時，似乎為所有按鈕都更改了onclick方法。 為什么會發生這種情況，如何防止這種情況發生？

Answer 1

您可以使用jQuery來做到這一點。 您可以定義一個函數（讓我們將其toggleInfo並將其放在onclick屬性中，如下所示：

<button onclick="toggleInfo()">Food Item</button>

然后在函數中，您可以在具有類info的最近元素上使用.toggle()

Answer 2

嘗試使用.nextElementSibling在click處理程序中定義info

 (function() { "use strict"; var menuItems = document.getElementsByClassName("menuItem"); for (var ii = 0; ii < menuItems.length; ii++) { var button = menuItems[ii].getElementsByTagName("button")[0]; button.onclick = function() { var info = this.nextElementSibling; if (info.style.display === "block") { info.style.display = "none"; } else { info.style.display = "block"; } }; } })(); 

 .info { display: none; } 

 <div class="menuItem"> <button>Food Item</button> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <img src="../images/menu/spaghetti.jpg" alt="spaghetti"> </div> </div> <div class="menuItem"> <button>Food Item</button> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <img src="../images/menu/spaghetti.jpg" alt="spaghetti"> </div> </div> <div class="menuItem"> <button>Food Item</button> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <img src="../images/menu/spaghetti.jpg" alt="spaghetti"> </div> </div> 

Answer 3

活動委托

有一種更簡單的方法可以做到這一點。 添加父容器

<div id="container">
<div class="menuItem">
.....

為父容器創建自定義Click處理程序

function handler(e){
 console.dir(e.target);//maybe console.log(e.target);
 // or console.dir(e.target.parentNode);
}
document.getElementById('container').addEventListener('click',handler,false);

單擊時檢查控制台。 關於clicked元素及其parentNode有很多有用的信息

---

在您的情況下：

function handler(e){
 if(e.target.nodeName=='BUTTON'){//if i click on the correct element
   e.target.parentNode.getElementsByClassName('info')[0].classList.toggle('view');
 }
}

classList nodeName parentNode 目標

這是自定義的隱藏類。

.view{
 display:none;
}

我也避免display:none瀏覽器每次都需要重top:-999999px; opacity:0; height:justthebuttonsize; transform:scale(0);整個元素。 top:-999999px; opacity:0; height:justthebuttonsize; transform:scale(0); top:-999999px; opacity:0; height:justthebuttonsize; transform:scale(0);

最酷的部分是您只有一個活動！ 沒有循環！ 還有更多優勢。 如果您通過節點瀏覽（甚至更快），您甚至不需要document.getElementsByClassName嗯，這就是純本機javascript。

http://jsfiddle.net/z6kk5rxc/2/

如果你不明白什么，那就問

Answer 4

使用jQuery，這很簡單：

$('.toggle').click(function() {
    $(this).next().toggle();
});

我在每個按鈕上添加了“ class =“ toggle”“。 這是一個小提琴： https : //jsfiddle.net/mckinleymedia/tx4tsvfa/