本文介绍了如何使用 JavaScript 实现点击按钮后，切换按钮后第一个 div 元素的 hidden 类，从而控制其可见性。通过简洁的 JavaScript 代码和清晰的示例，帮助开发者理解如何在不依赖特定 ID 的情况下，实现通用的元素切换功能。
在 Web 开发中，经常需要根据用户的交互来动态地改变页面的显示效果。一个常见的需求是，点击某个按钮后，切换该按钮后第一个 div 元素的可见性。本文将介绍一种实现这种效果的 JavaScript 方法，重点在于如何避免硬编码 ID，从而实现代码的复用性。
方案：通过关联按钮 ID 和 div ID 实现
一种简洁有效的解决方案是将按钮的 id 与需要切换的 div 的 id 关联起来。具体来说，如果按钮的 id 为 button-1，那么对应的 div 的 id 可以设置为 shop-button-1。
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>
在这个示例中，按钮的 id 为 button-1，对应的 div 的 id 为 shop-button-1。 hidden 类用于初始状态隐藏该 div。
JavaScript 代码：
function showShop(id) { const elem = document.getElementById(id); const div = document.getElementById('shop-' + id); div.classList.toggle('hidden'); }
这段 JavaScript 代码首先通过 document.getElementById(id) 获取被点击的按钮元素。然后，根据按钮的 id，动态地构造出对应的 div 的 id（shop- + id），并使用 document.getElementById() 获取该 div 元素。最后，使用 div.classList.toggle(‘hidden’) 来切换该 div 元素的 hidden 类，从而控制其可见性。
代码解释：
- document.getElementById(id): 根据传入的 id 参数，获取对应的 HTML 元素。
- ‘shop-‘ + id: 字符串拼接，生成目标 div 元素的 id。
- div.classList.toggle(‘hidden’): 切换 div 元素的 hidden 类。如果元素已经有 hidden 类，则移除；如果没有，则添加。
使用注意事项：
- 确保按钮的 id 和对应的 div 的 id 按照约定的规则进行命名，例如 shop-<button_id>。
- 初始状态下，需要隐藏的 div 元素应该添加 hidden 类。
总结：
通过将按钮的 id 与需要切换的 div 的 id 关联起来，可以实现一种简洁、通用的方法来切换按钮后第一个 div 元素的可见性。这种方法避免了硬编码 ID，提高了代码的复用性和可维护性。 这种方法适用于多个按钮和 div 元素的情况，只需要按照约定的规则进行命名即可。
