个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的目标是让 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/
25
4
0
这两种引用方法的主要区别是什么？ 使用其中一种有什么好处？另外，它们各自最适合哪种用例？ var selection = document.querySelector('.selector') !==
对于下面给出的代码，document.querySelector('createButton') 和 Polymer.dom(this.$).querySelector('createButton')
查看 mdn“querySelector”会在两个部分下弹出，但它们似乎都达到了相同的目的。哪一个是不同情况的理想选择？ ...或者它们基本上在功能上是相同的？ https://developer.m
这个问题已经有答案了: Is element.querySelector() different from document.querySelector()? (2 个回答) 已关闭 3 年前。 当我
我做了几次迭代测试来测试 Document.querySelector 的效率和 Element.querySelector . 标记: 脚本: 查询 Document.querySelec
如何使用 document.querySelectorAll() 从下面的代码中选择特定的文本输出？ 我想在变量中捕获结果，并尝试使用以下代码来实现: let result = document.qu
HTML 2018-2019 如何使用 CSS 选择器定位元素 onclick 我试过下面的代码但不工作 ie.document.querySelector("[onclick='loadYearPa
通常在 javascript 中使用查询选择器时，我们会这样做， ABCD var className = 'abcd'; var x = document.querySelector('.'+cla
我目前正在学习 querySelector方法，惊讶地发现它被归类为过时了 这是 screenshot 的链接 querySelector 方法真的已经过时了吗？若有，原因为何？应该使用什么方法呢？
MDN 指定的 querySelectorALL() 不支持事件节点并且仅返回静态节点。 MDN querySelectorALL querySelector() 是否支持活节点 MDN 没有指定任何
这个问题在这里已经有了答案: What does this `…${…}…` code in the node docs mean? [duplicate] (1 个回答) 关闭 6 年前。 我是
根据下面的书面代码，当单击具有 keyCode 65 的“a”时，预期结果应该是在控制台中返回 DOM 元素“”。当我运行代码并检查它时，它在控制台中返回 null。 部分源码: wind
我正在使用 SVG.js select() 函数，它使用 querySelector() 函数。 目前，我使用的命令是:select("[id='1']")(1可以用其他数字代替) 我想做的是选择该元
我有这个循环应该设置 值为无并更新占位符。当我登录节点时它工作正常但是 value和 placeholder没有更新？怎么了？ 数据是一个 JSON 对象。 var data = {"password
我正在尝试使用 QuerySelector 获取数据表单中每个评论的值。有一个“添加”按钮，允许显示另一个元素并将元素的名称增加 +1。例如，第一个评论的名称为“comment0”，第二个评论的名称为
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 7 年前。 Improv
我有一个具有以下格式类的输入字段: some_starting_constant_string somevariablestring some_ending_constant_string 所以我想要
我正在寻找一种方法来查找包含以给定字符串开头的属性的所有元素。例如: document.querySelectorAll('[ng-*]') 将返回带有 Angular 指令的所有元素(ng-clic
我的第一列应该是实际日期，但我的 js 脚本仅适用于我的 html 代码中的一个类。 问题:如何使我的js代码适用于html代码中的每个类，我使用querySelector()，但我应该使用类似$(t
有没有办法使用 CSS 选择器来选择出现在给定元素之后的元素。 假设我有一个像这样的 DOM A next span the target next span
我是一名优秀的程序员,十分优秀！