如何使用 JavaScript 切换现有类

Question

我有一个导航栏，锚标记内有 Bootstrap 图标

这是我的代码：

<li class="nav-item">
    <a href="#" class="nav-link">
        <i class="bi bi-house"></i>
    </a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">
        <i class="bi bi-heart"></i>
    </a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">
        <i class="bi bi-envelope"></i>
    </a>
</li>

我想在点击时添加

-fill

，并在点击另一个导航时将其删除。我已经尝试过

classList.toggle

，但似乎只是添加新类而不附加它。

<li class="nav-item">
    <a href="#" class="nav-link">
        <i class="bi bi-house-fill"></i>
    </a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">
        <i class="bi bi-heart"></i>
    </a>
</li>
<li class="nav-item">
    <a href="#" class="nav-link">
        <i class="bi bi-envelope"></i>
    </a>
</li>

Answer 1

当前方法的问题是 classList.toggle 仅在类不存在时添加该类，如果存在则将其删除。这意味着它只会在原始类和附加“-fill”的类之间切换，不允许多个元素同时具有“-fill”类。

以下是实现所需行为的方法：

1。删除现有的“-fill”类：

在将“-fill”类添加到单击的元素之前，您需要将其从可能拥有该类的任何其他元素中删除。这确保一次只有一个元素处于活动状态。

// Select all anchor elements within the navigation
const navLinks = document.querySelectorAll('.nav-link');

navLinks.forEach(link => {
  // Remove any existing "-fill" class
  link.classList.remove('bi-house-fill', 'bi-heart-fill', 'bi-envelope-fill');
});

2。将“-fill”类添加到单击的元素：

现在，当单击锚元素时，您可以使用 classList.toggle 添加特定于单击的图标的“-fill”类。

navLinks.forEach(link => {
  link.addEventListener('click', () => {
    const icon = link.querySelector('i');
    const iconClass = icon.classList[1]; // Get the second class (e.g., "bi-house")
    icon.classList.toggle(`${iconClass}-fill`);
  });
});

说明：

1. 我们使用

   querySelectorAll

   选择所有具有导航链接类的锚元素。
2. 我们使用

   forEach

   循环遍历每个链接。
3. 在循环内，我们使用

   classList.remove

   从链接内的图标中删除任何现有的“-fill”类。这确保只有一个元素处于活动状态。
4. 我们为

   click

   事件的每个链接添加一个事件侦听器。
5. 单击链接时，我们使用

   querySelector

   获取链接内的图标元素。
6. 然后我们使用

   classList[1]

   访问图标的第二类名称。这假设图标类是元素上的第二类。
7. 最后，我们使用

   classList.toggle

   和模板文字来动态构造要切换的类名。这可确保根据单击的图标添加或删除适当的“-fill”类。

此方法确保只有单击的图标具有“-fill”类，为活动导航项提供所需的视觉反馈。