使用 JavaScript 切换按钮后第一个 div 的可见性

本文介绍了如何使用 JavaScript 实现点击按钮后，切换按钮后第一个 div 元素的 hidden 类，从而控制其可见性。通过简洁的 JavaScript 代码和清晰的示例，帮助开发者理解如何在不依赖特定 ID 的情况下，实现通用的元素切换功能。

在 Web 开发中，经常需要根据用户的交互来动态地改变页面的显示效果。一个常见的需求是，点击某个按钮后，切换该按钮后第一个 div 元素的可见性。本文将介绍一种实现这种效果的 JavaScript 方法，重点在于如何避免硬编码 ID，从而实现代码的复用性。

方案：通过关联按钮 ID 和 div ID 实现

一种简洁有效的解决方案是将按钮的 id 与需要切换的 div 的 id 关联起来。具体来说，如果按钮的 id 为 button-1，那么对应的 div 的 id 可以设置为 shop-button-1。

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>

在这个示例中，按钮的 id 为 button-1，对应的 div 的 id 为 shop-button-1。 hidden 类用于初始状态隐藏该 div。

立即学习“Java免费学习笔记（深入）”；

JavaScript 代码：

先见AI

数据为基，先见未见

95

查看详情

function showShop(id) {
  const elem = document.getElementById(id);
  const div = document.getElementById('shop-' + id);

  div.classList.toggle('hidden');
}

这段 JavaScript 代码首先通过 document.getElementById(id) 获取被点击的按钮元素。然后，根据按钮的 id，动态地构造出对应的 div 的 id（shop- + id），并使用 document.getElementById() 获取该 div 元素。最后，使用 div.classList.toggle('hidden') 来切换该 div 元素的 hidden 类，从而控制其可见性。

代码解释：

• document.getElementById(id): 根据传入的 id 参数，获取对应的 HTML 元素。
• 'shop-' + id: 字符串拼接，生成目标 div 元素的 id。
• div.classList.toggle('hidden'): 切换 div 元素的 hidden 类。如果元素已经有 hidden 类，则移除；如果没有，则添加。

使用注意事项：

• 确保按钮的 id 和对应的 div 的 id 按照约定的规则进行命名，例如 shop-<button_id>。
• 初始状态下，需要隐藏的 div 元素应该添加 hidden 类。

总结：

通过将按钮的 id 与需要切换的 div 的 id 关联起来，可以实现一种简洁、通用的方法来切换按钮后第一个 div 元素的可见性。这种方法避免了硬编码 ID，提高了代码的复用性和可维护性。 这种方法适用于多个按钮和 div 元素的情况，只需要按照约定的规则进行命名即可。

以上就是使用 JavaScript 切换按钮后第一个 div 的可见性的详细内容，更多请关注php中文网其它相关文章！