如何在 class 中获取特定的按钮标签

Question

我想将 class "hidden" 添加到第二个 "moves" class 内的第三个按钮元素。我的代码有问题吗？谢谢

document.getElementsByClassName("moves")[1].getElementsByTagName("button")[4].classList.add("hidden");

下面是html； p.s。我只是更改了这个问题的索引以简化我的问题。所以不要介意索引。

       <div class="moves">
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
        </div>

Answer 1

更新根据你提供的UI看，只有'move'和class上只有四个按钮。因此索引位置将在您的 javascript 代码中更新。与 getElementsByClassName 一样，索引位置将从 0 开始，即 getElementsByClassName[0]。同样在 getElementByTagName 索引位置将从 0 开始。因此您必须更新“3”处的索引，“3”指的是您的最后一个按钮。

根据我之前的回答，有 5 个按钮，所以我使用了索引位置 4。

document.getElementsByClassName("moves")[0].getElementsByTagName("button")[3].classList.add("hidden");

<div class="moves">
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
          <button>
            <span class="move">Move Name Here</span> <span class="dp"></span>
            <img src="icons/fighting.jpg" alt="Pokemon move" />
          </button>
        </div>

看到下面的代码片段，我认为是场景。您对我们进行编码工作正常，class 正在添加到元素中。检查那个元素，你会看到它

document.getElementsByClassName("moves")[1].getElementsByTagName("button")[3].classList.add("hidden");

<div class="moves">
first
</div>
<div class="moves">
second
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>

Answer 2

第4个按钮实际上是索引号3。将 4 更改为 3 就大功告成了。

document.getElementsByClassName("moves")[1].getElementsByTagName("button")[3].classList.add("hidden");

您说我们不应该担心索引，但您提供的索引会在 HTML 中引发错误。没有第 5 个按钮。

如何在 class 中获取特定的按钮标签

How to grab a specific button tag inside of a class

javascript

getelementsbytagname

getelementsbyclassname