本文旨在提供一种通用的JavaScript方法，实现在点击按钮后，切换该按钮后紧邻的第一个div元素的hidden类，从而控制其可见性。通过将按钮ID与目标div的ID关联，可以简化代码并实现多个店铺信息的动态显示与隐藏，无需为每个店铺编写单独的函数。
实现原理
核心思路是将触发事件的按钮的id与需要操作的div的id建立关联。在HTML结构中，我们为每个按钮赋予唯一的id，并根据该id生成对应的div的id。在JavaScript函数中，通过获取按钮的id，动态生成div的id，并使用document.getElementById方法获取该div元素，最后切换其hidden类，从而实现显示或隐藏。
代码示例
以下是一个完整的示例，展示了如何使用该方法：
HTML结构：
立即学习“Java免费学习笔记（深入）”；
Shop name
Shop Address · Shop number
Opening soon
Shop name
Shop Address · Shop number
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代码：
- showShop(id)函数接收按钮的id作为参数。
- document.getElementById(id)获取触发点击事件的按钮元素，虽然在此处并没有直接使用该元素，但它可以作为将来扩展功能的参考。
- document.getElementById('shop-' + id)通过拼接字符串的方式，动态生成目标div的id，并获取该div元素。
- div.classList.toggle('hidden')切换目标div的hidden类，从而实现显示或隐藏。
注意事项
- 确保每个按钮的id都是唯一的。
- 确保与按钮对应的div的id按照约定规则生成（shop- + 按钮id）。
- hidden类的定义应该在CSS中进行，例如：.hidden { display: none; }。
总结
通过将按钮的id与目标div的id关联，我们可以使用一个通用的JavaScript函数来切换多个店铺信息的可见性，避免了重复编写代码。这种方法简洁高效，易于维护，适用于各种需要动态显示和隐藏内容的场景。
