我的目标是让 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"> </span><span class="score"> </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"> </span><span class="score"> </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>
预期结果如下:
我可以使用类型方法来实现这个结果。但我有 32 个用户可以单击的按钮类，因此它需要适应这一点。
最佳答案
有一种更简单的方法可以获得您需要的结果。无需为每组项目设置事件处理程序，只需使用事件委托(delegate)，在您关心的元素的祖先处设置单个事件处理程序，然后让事件(在某些后代处触发)向上冒泡到祖先，其中它被处理了。然后，在处理程序中，您可以检查哪个元素实际触发了事件并采取相应的操作。
// Get reference to ancestor of elements that need the same handler
let parent = document.querySelector(".matchup");
// Set up event handler on ancestor
parent.addEventListener("click", function(event){
// Check if actual event instigator was what we want
if(event.target.classList.contains("drop-down-btn")){
// Toggle the next sibling of the clicked element
event.target.nextElementSibling.classList.toggle("hidden");
}
});.hidden { display:none; }
.seed, .team1, .score { pointer-events:none; }<ul class="matchup">
<li class="team team-top">
<button class="btn drop-down-btn">
<span class="seed">01</span>
<span id="team1"> </span>
<span class="score"> </span>
</button>
<div id="myDropdownTop" class="dropdown-content hidden">
<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"> </span>
<span class="score"> </span>
</button>
<div id="myDropdownBottom" class="dropdown-content hidden">
<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>关于javascript - 如何使用 querySelector() 在 javascript 中查找唯一的类 div id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57435735/