本教程旨在提供一种通用的 JavaScript 方法，实现在点击按钮后，显示该按钮后面的第一个 div 元素。我们将避免使用硬编码的 ID，从而创建一个可复用的函数，适用于多个店铺信息展示场景。通过修改 HTML 结构并结合 JavaScript 代码，实现点击按钮切换对应 div 元素的显示与隐藏。
解决方案
原始代码尝试使用 closest(‘div’) 来查找目标 div 元素，但这只会找到当前元素及其父元素链上的第一个 div，而不是按钮之后的那个。 为了实现目标，我们需要一种更精确的方法来定位目标 div。
一种解决方案是将按钮的 ID 与 div 的 ID 关联起来。 这可以通过修改 HTML 结构来实现，并简化 JavaScript 代码。
HTML 结构
修改后的 HTML 结构如下：
立即学习“Java免费学习笔记（深入）”；
Shop name
Shop Address · Shop number
Shop name
Shop Address · Shop number
关键在于：
按钮 ID： 每个按钮都有一个唯一的 ID，例如 button-1，button-2等。Div ID： 对应的 div 元素的 ID 基于按钮的 ID，例如 shop-button-1，shop-button-2等。 这种命名约定允许我们通过按钮的 ID 动态地找到对应的 div 元素。CSS Class： hidden 类用于初始隐藏 div 元素。
JavaScript 代码
对应的 JavaScript 代码如下：
function showShop(id) { const div = document.getElementById('shop-' + id); div.classList.toggle('hidden');}
这段代码做了以下事情：
获取按钮 ID： showShop 函数接收按钮的 ID 作为参数。构建 Div ID： 使用按钮的 ID 构建目标 div 元素的 ID，例如 shop-button-1。获取 Div 元素： 使用 document.getElementById 获取对应的 div 元素。切换 Class： 使用 classList.toggle(‘hidden’) 切换 div 元素的 hidden 类，从而显示或隐藏该元素。
总结
这种方法通过将按钮的 ID 与 div 元素的 ID 关联起来，实现了一种通用的解决方案。 这种方法避免了使用 closest 方法可能带来的问题，并提供了一种更清晰和可维护的方式来处理多个店铺信息展示场景。
注意事项
确保每个按钮都有一个唯一的 ID。确保对应的 div 元素的 ID 与按钮的 ID 按照约定的方式关联。hidden 类的样式定义应该在 CSS 文件中定义，例如 display: none;。
通过以上步骤，可以创建一个可复用的 JavaScript 函数，实现在点击按钮后，显示该按钮后面的第一个 div 元素。
以上就是JavaScript：点击按钮后显示其后的第一个 Div 元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573604.html
微信扫一扫 
支付宝扫一扫 
