本文旨在提供一种通用的JavaScript方法，实现在点击按钮后，切换该按钮后紧邻的第一个div元素的hidden类，从而控制其可见性。通过将按钮ID与目标div的ID关联，可以简化代码并实现多个店铺信息的动态显示与隐藏，无需为每个店铺编写单独的函数。
实现原理
核心思路是将触发事件的按钮的id与需要操作的div的id建立关联。在html结构中，我们为每个按钮赋予唯一的id，并根据该id生成对应的div的id。在JavaScript函数中，通过获取按钮的id，动态生成div的id，并使用document.getElementById方法获取该div元素，最后切换其hidden类，从而实现显示或隐藏。
代码示例
以下是一个完整的示例，展示了如何使用该方法：
HTML结构：
立即学习“Java免费学习笔记（深入）”；
<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>
JavaScript代码：
function showShop(id) { const elem = document.getElementById(id); const div = document.getElementById('shop-' + id); div.classList.toggle('hidden'); }
代码解释：
- HTML结构：
- 每个按钮的id都以button-开头，后跟一个唯一的数字。
- 与每个按钮对应的div的id以shop-开头，后跟按钮的id。
- 初始状态下，所有的div都拥有hidden类，使其默认隐藏。
- JavaScript代码：
注意事项
- 确保每个按钮的id都是唯一的。
- 确保与按钮对应的div的id按照约定规则生成（shop- + 按钮id）。
- hidden类的定义应该在css中进行，例如：.hidden { display: none; }。
总结
通过将按钮的id与目标div的id关联，我们可以使用一个通用的JavaScript函数来切换多个店铺信息的可见性，避免了重复编写代码。这种方法简洁高效，易于维护，适用于各种需要动态显示和隐藏内容的场景。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
