使用JavaScript切换按钮后首个Div的可见性

本文旨在提供一种通用的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');
}

代码解释：

1. HTML结构：
   • 每个按钮的id都以button-开头，后跟一个唯一的数字。
   • 与每个按钮对应的div的id以shop-开头，后跟按钮的id。
   • 初始状态下，所有的div都拥有hidden类，使其默认隐藏。
2. 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的可见性的详细内容，更多请关注php中文网其它相关文章！