本教程旨在提供一种通用的 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
Opening soon
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 元素。
