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>

然后在您的函数中，您可以对类.toggle()

的最近元素使用info

Answer 2

尝试使用info

在click处理程序中定义.nextElementSibling

＆＃13;

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

＆＃13;

.info {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 3

活动委派

有一种更简单的方法可以做到这一点。添加父容器

Data.Text.zip

为父容器

创建自定义Click处理程序

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

单击时检查控制台。有关点击元素及其parentNode

的许多有用信息

在你的情况下：

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

classList nodeName parentNode target

这是自定义隐藏类。

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

我也会避免.view{ display:none; }浏览器每次都需要重绘整个元素。display:none

的思考

这很酷的部分是你只有一个活动！没有循环！还有更多优点。如果你通过节点导航（这要快得多），你甚至不需要top:-999999px; opacity:0; height:justthebuttonsize; transform:scale(0);。嗯，这就是纯粹的原生javascript。

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

如果您不理解某些事情，请询问

Answer 4

使用jQuery，这很简单：

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

我添加了＆＃39;类=＆＃34;肘节＆＃34; ＆＃39;到每个按钮。这是一个小提琴： https://jsfiddle.net/mckinleymedia/tx4tsvfa/

如何将各个按钮与各个div相关联？

4 个答案: