如何使用querySelector（）在javascript中查找唯一的类div id_Javascript_Html

如何使用querySelector（）在javascript中查找唯一的类div id

javascript html

如何使用querySelector（）在javascript中查找唯一的类div id,javascript,html,Javascript,Html,我的目标是让id=“myDropdownTop”切换受人尊敬的下拉菜单。这个问题是我的脚本部分代码似乎不正确，特别是最后一行：（“div.dropdown-content”）.classList.toggle（“show”）似乎工作不正常 <!DOCTYPE html> <html> <body> <section id="bracket"> <div class="container">

我的目标是让id=“myDropdownTop”切换受人尊敬的下拉菜单。这个问题是我的脚本部分代码似乎不正确，特别是最后一行：

（“div.dropdown-content”）.classList.toggle（“show”）
似乎工作不正常
<!DOCTYPE html>
<html>
<body>
    <section id="bracket">
        <div class="container">
          <div class="split split-one">
            <div class="round round-one current">
              <div class="round-details">Round 1<br /><span class="date">August 9</span></div>
              <ul class="matchup">
                <li class="team team-top">
                  <button class="btn drop-down-btn"><span class="seed">01</span><span id="team1">&nbsp;</span><span class="score">&nbsp;</span></button>
                  <div id="myDropdownTop" class="dropdown-content">
                    <button class="open-button" onclick="openFormPF()">Change Team</button></br>
                    <button class="open-button" onclick="openFormPF()">Establish Winner</button></br>
                    <button class="open-button" onclick="openFormPF()">Set Score</button></br>
                  </div>
                </li>
                <li class="team team-bottom">
                  <button class="btn drop-down-btn"><span class="seed">32</span><span id="team1">&nbsp;</span><span class="score">&nbsp;</span></button>
                  <div id="myDropdownBottom" class="dropdown-content">
                    <button class="open-button" onclick="openFormPF()">Change Team</button></br>
                    <button class="open-button" onclick="openFormPF()">Establish Winner</button></br>
                    <button class="open-button" onclick="openFormPF()">Set Score</button></br>
                  </div>
                </li>
              </ul>
    .
    .
    .

    <script>
        document.querySelectorAll("li.team").forEach(function(teamDom) {
          teamDom.querySelector("button.drop-down-btn").addEventListener("click", function() {
            teamDom.querySelector("div.dropdown-content").classList.toggle("show");
          });
        });
    </script>
    </html>


第一轮
8月9日


01
变革团队

确立胜利者

得分



32
变革团队

确立胜利者

得分



.
.
.
document.queryselectoral（“li.team”）.forEach（函数（teamDom）{
teamDom.querySelector（“button.drop down btn”）.addEventListener（“单击”，函数（）{
teamDom.querySelector（“div.dropdown-content”）.classList.toggle（“show”）；
});
});

预期结果如下所示：

我可以使用类型方法实现这个结果。但是我有32个按钮类，用户可以点击，所以它需要适应。有一种更简单的方法来获得所需的结果。不要为每一组项设置事件处理程序，只需使用事件委派，在您关心的元素的祖先处设置单个事件处理程序，然后让事件（在某个后代触发）冒泡到处理它的祖先。然后，在处理程序中，您可以检查哪些元素实际触发了事件，并相应地采取行动

//获取对需要相同处理程序的元素的祖先的引用
让parent=document.querySelector（“.matchup”）；
//在祖先上设置事件处理程序
parent.addEventListener（“单击”），函数（事件）{
//检查实际事件的策划者是否是我们想要的
if（event.target.classList.contains（“下拉btn”））{
//切换所单击元素的下一个同级
event.target.nextElementSibling.classList.toggle（“隐藏”）；
}
});
.hidden{display:none；}
.seed、.team1、.score{指针事件：无；}


01
变更团队

建立赢家

设置分数



32
变更团队

建立赢家

设置分数


有一种更简单的方法来获得所需的结果。不要为每一组项设置事件处理程序，只需使用事件委派，在您关心的元素的祖先处设置单个事件处理程序，然后让事件（在某个后代触发）冒泡到处理它的祖先。然后，在处理程序中，您可以检查哪些元素实际触发了事件，并相应地采取行动

//获取对需要相同处理程序的元素的祖先的引用
让parent=document.querySelector（“.matchup”）；
//在祖先上设置事件处理程序
parent.addEventListener（“单击”），函数（事件）{
//检查实际事件的策划者是否是我们想要的
if（event.target.classList.contains（“下拉btn”））{
//切换所单击元素的下一个同级
event.target.nextElementSibling.classList.toggle（“隐藏”）；
}
});
.hidden{display:none；}
.seed、.team1、.score{指针事件：无；}


01
变更团队

建立赢家

设置分数



32
变更团队

建立赢家

设置分数