Question

我正在为我的工作设置一个轻量级网站。它只有很少的JS交互性，只使用带有TweenLite（）的GSAP来实现1-2个动画。由于它几乎所有的独特元素，我大多可以使用 getElementById（）来覆盖它们。

涉及多个相似元素的一个问题让我感到悲伤。手风琴式菜单：

<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

};

但是，这似乎没有对我点击按钮做出反应（没有错误，没有任何错误）。我在内部有相同的函数（），并且可以通过将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/

的演示

Answer 2

jQuery绑定将自动循环遍历所有捕获的元素，并手动绑定到每个元素。当你使用vanilla JS时，你必须自己进行循环：

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

for (var i = 0; i < btn.length; i++) {
    btn[i].onmouseup = function () {
        // show/hide code here.
    });
}

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

2 个答案: