如何将各个按钮与各个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/