javascript - 使用 getElementsByTagName 时，如何指定单击哪个元素

Question

我正在为我的工作建立一个轻量级网站。它具有非常少的 JS 交互性，仅将 GSAP 与 TweenLite() 一起用于 1-2 个动画。由于它几乎所有独特的元素，我主要可以使用 getElementById() 来覆盖它们。

一个涉及多个相似元素的问题让我很伤心。 Accordion 式菜单:

<button>MenuOne</button>
<div>
    <a>...</a>
    <a>...</a>
    <a>...</a>
</div>

<button>MenuTwo</button>
<div>
    <a>...</a>
    <a>...</a>
    <a>...</a>
</div>

<button>MenuThree</button>
<div>
    <a>...</a>
    <a>...</a>
    <a>...</a>
</div>

这个想法是在点击菜单按钮时，下一个 div 变得可见，而任何超过的 div 变得不可见(默认情况下全部隐藏)。

如果我要使用 jQuery，这可以通过以下方式实现

$('button').click(function() {

  //show/hide stuff

});

当 GSAP 涵盖了我目前使用的所有动画时，我不想将 jQuery 用于单个选择器:

var btn = document.getElementsByTagName('button');

btn.onmouseup=function () {

  //show/hide stuff

};

但是，这似乎对我点击按钮没有反应(没有错误，没有)。我在里面有相同的 function()，可以通过将 btn 变量放入 jquery $(btn).click(.

我只能假设 btn 变量正在监视所有 按钮，并且无法区分我刚刚单击了哪一个(如果有的话)。 jQuery 库能够做的事情。

---

在网上四处寻找，我发现原生 JS 结果与 jquery 的结果略有不同。在控制台中，jquery 显示为一个 Object[array]，而 javascript 显示为一个 HTMLCollectionT[array]。我的猜测是 jquery 数组的一部分有一些默认情况下不存在的标记。

我找到了如何在数组中选择 [0] [1] [2] 按钮并可以添加唯一 ID，但我确信我可以在没有 3 个单独函数的情况下解决这个问题。

Answer 1

您将通过 document.getElementsByTagName() 函数获取按钮列表，如果您想在单击特定按钮时附加特定功能，则可以这样做。

var allButtons = document.getElementsByTagName('button');
for(var i=0; i<allButtons.length; i++){
    allButtons[i].onclick = myfunction;
}

function myfunction (){
    alert(this.id);
}

这是 http://jsfiddle.net/M697C/ 的演示