本文旨在提供一种通用的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
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函数来切换多个店铺信息的可见性，避免了重复编写代码。这种方法简洁高效，易于维护，适用于各种需要动态显示和隐藏内容的场景。
以上就是使用JavaScript切换按钮后首个Div的可见性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573595.html
微信扫一扫 
支付宝扫一扫 
