JS切换按钮控制首个Div显示隐藏

想要使用JavaScript控制按钮点击后第一个Div的显示与隐藏吗？本文提供一种通用的解决方案，**无需为每个Div编写单独的函数**。通过巧妙地将按钮ID与目标Div的ID关联，利用JavaScript动态切换Div的`hidden`类，实现店铺信息的动态显示与隐藏。核心原理是：通过获取按钮的ID，动态生成目标Div的ID，并使用`document.getElementById`方法获取该Div元素，最后切换其`hidden`类。本文提供详细的HTML和JavaScript代码示例，并解释了代码逻辑和注意事项，帮助你轻松实现JavaScript切换按钮后控制第一个Div显示隐藏的功能，提升用户体验和网站互动性。了解更多JavaScript技巧，请继续阅读！

本文旨在提供一种通用的JavaScript方法，实现在点击按钮后，切换该按钮后紧邻的第一个div元素的hidden类，从而控制其可见性。通过将按钮ID与目标div的ID关联，可以简化代码并实现多个店铺信息的动态显示与隐藏，无需为每个店铺编写单独的函数。

实现原理

核心思路是将触发事件的按钮的id与需要操作的div的id建立关联。在HTML结构中，我们为每个按钮赋予唯一的id，并根据该id生成对应的div的id。在JavaScript函数中，通过获取按钮的id，动态生成div的id，并使用document.getElementById方法获取该div元素，最后切换其hidden类，从而实现显示或隐藏。

代码示例

以下是一个完整的示例，展示了如何使用该方法：

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>

<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函数来切换多个店铺信息的可见性，避免了重复编写代码。这种方法简洁高效，易于维护，适用于各种需要动态显示和隐藏内容的场景。

到这里，我们也就讲完了《JS切换按钮控制首个Div显示隐藏》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！