如何使用 jquery 切换 fa fa-caret-down 和 fa fa-caret-up

📌 相关文章

📜 如何使用 jquery 切换 fa fa-caret-down 和 fa fa-caret-up - Javascript (1)

📅 最后修改于: 2023-12-03 14:51:57.946000 🧑 作者: Mango

在开发网页中，我们通常会使用 Font Awesome 字体图标库来增强网页的视觉效果，并使用 jQuery 库来操作 DOM 元素。在有些情况下，我们需要在点击某个元素时切换该元素对应的 Font Awesome 图标样式，如将 fa fa-caret-down 切换成 fa fa-caret-up。本文将介绍如何使用 jQuery 来实现这一功能。

HTML 结构示例

我们先来看一个 HTML 结构示例，该结构包括一个用于切换样式的元素和一个用于显示样式的图标元素。

<button id="toggle-icon">
    <i class="fa fa-caret-down"></i>
</button>

其中，#toggle-icon 指定了切换样式的元素，它包含一个 Font Awesome 图标元素 i，初始时样式为 fa fa-caret-down。

jQuery 实现

接下来，我们使用 jQuery 库来实现在点击 #toggle-icon 时切换图标样式的功能。具体实现步骤如下：

给 #toggle-icon 绑定点击事件。
获取 #toggle-icon 内部的图标元素 i。
判断 i 的样式类是否为 fa fa-caret-down。
如果是，将 i 的样式类修改为 fa fa-caret-up，否则修改为 fa fa-caret-down。

代码如下：

$('#toggle-icon').click(function() {
    var icon = $(this).find('i');
    if (icon.hasClass('fa fa-caret-down')) {
        icon.removeClass('fa fa-caret-down').addClass('fa fa-caret-up');
    } else {
        icon.removeClass('fa fa-caret-up').addClass('fa fa-caret-down');
    }
});

完整示例

下面是一个完整的示例，其中包括了 Font Awesome 和 jQuery 的引用和 CSS 样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery 切换 Font Awesome 图标样式</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #toggle-icon {
            padding: 8px 15px;
            background-color: #eee;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #toggle-icon i {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <button id="toggle-icon">
        <i class="fa fa-caret-down"></i>
        切换图标
    </button>
    <script>
        $('#toggle-icon').click(function() {
            var icon = $(this).find('i');
            if (icon.hasClass('fa fa-caret-down')) {
                icon.removeClass('fa fa-caret-down').addClass('fa fa-caret-up');
            } else {
                icon.removeClass('fa fa-caret-up').addClass('fa fa-caret-down');
            }
        });
    </script>
</body>
</html>

运行该示例后，点击按钮即可看到图标样式的切换效果。