JavaScript：点击按钮后显示其后的第一个 Div 元素

本教程旨在提供一种通用的 JavaScript 方法，实现在点击按钮后，显示该按钮后面的第一个 div 元素。我们将避免使用硬编码的 ID，从而创建一个可复用的函数，适用于多个店铺信息展示场景。通过修改 html 结构并结合 JavaScript 代码，实现点击按钮切换对应 div 元素的显示与隐藏。

解决方案

原始代码尝试使用 closest(‘div’) 来查找目标 div 元素，但这只会找到当前元素及其父元素链上的第一个 div，而不是按钮之后的那个。 为了实现目标，我们需要一种更精确的方法来定位目标 div。

一种解决方案是将按钮的 ID 与 div 的 ID 关联起来。 这可以通过修改 HTML 结构来实现，并简化 JavaScript 代码。

HTML 结构

修改后的 HTML 结构如下：

<h3 class="-center"><shop>Shop name</shop></h3> <button type="button" id="button-1" onclick="showShop(this.id)">   <shop-title><b>Bakery Shop</b></shop-title> </button> <p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p> <div id="shop-button-1" class="hidden">  <p><shop-info>Opening soon</shop-info></p> </div>  <h3 class="-center"><shop>Shop name</shop></h3> <button type="button" id="button-2" onclick="showShop(this.id)">   <shop-title><b>Coffee Shop</b></shop-title> </button> <p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p> <div id="shop-button-2" class="hidden">  <p><shop-info>Opening soon</shop-info></p> </div>

关键在于：

• 按钮 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'); }

这段代码做了以下事情：

1. 获取按钮 ID： showShop 函数接收按钮的 ID 作为参数。
2. 构建 Div ID： 使用按钮的 ID 构建目标 div 元素的 ID，例如 shop-button-1。
3. 获取 Div 元素： 使用 document.getElementById 获取对应的 div 元素。
4. 切换 Class： 使用 classList.toggle(‘hidden’) 切换 div 元素的 hidden 类，从而显示或隐藏该元素。

总结

这种方法通过将按钮的 ID 与 div 元素的 ID 关联起来，实现了一种通用的解决方案。 这种方法避免了使用 closest 方法可能带来的问题，并提供了一种更清晰和可维护的方式来处理多个店铺信息展示场景。

注意事项

• 确保每个按钮都有一个唯一的 ID。
• 确保对应的 div 元素的 ID 与按钮的 ID 按照约定的方式关联。
• hidden 类的样式定义应该在 CSS 文件中定义，例如 display: none;。

通过以上步骤，可以创建一个可复用的 JavaScript 函数，实现在点击按钮后，显示该按钮后面的第一个 div 元素。