如何使用 JavaScript 更改 li 的 Font Awesome 图标答案

【问题标题】：How to change Font Awesome icon at li using JavaScript如何使用 JavaScript 更改 li 的 Font Awesome 图标
【发布时间】：2023-03-23 02:38:01
【问题描述】：

我不知道如何用 javascript 或 jquery 更改图标。

我有以下代码：

<li style="font-size: 25px; color: #CF8467" onclick="rek1()"> 70789 <i class="fa fa-caret-right" onclick="change(iconcaret)" id="iconcaret"></i> </li>

注意：rek1() 是一个隐藏数据的函数

我已经尝试了以下代码：

function change(iconcaret){
          if(document.getElementById(iconcaret).className=="fa fa-caret-right"){
            document.getElementById(iconcaret).className = "fa fa-chevron-down";
          }else{
            document.getElementById(iconcaret).className = "fa fa-caret-right";
          }
}

它没有按预期工作。

我想做的是；一旦我点击li，将插入符号的权利更改为插入符号

【问题讨论】：

你能提供rek1()函数吗？你在里面调用函数change(iconcaret)吗？同样在您的 HTML 中没有提供 id。

标签： javascript html icons font-awesome

【解决方案1】：

这是将元素本身传递给change函数：

change(iconcaret)

但在函数中，您希望将 ID 作为字符串来查找元素：

document.getElementById(iconcaret)

使用一种方法或另一种方法。您可以将 ID 作为字符串传递：

change('iconcaret')

或者可以传递元素，直接在函数中使用：

function change(iconcaret){
  if(iconcaret.className=="fa fa-caret-right"){
    iconcaret.className = "fa fa-chevron-down";
  }else{
    iconcaret.className = "fa fa-caret-right";
  }
}

例如，这里我们传递ID：

function change(iconcaret){
  if(document.getElementById(iconcaret).className=="fa fa-caret-right"){
    document.getElementById(iconcaret).className = "fa fa-chevron-down";
  }else{
    document.getElementById(iconcaret).className = "fa fa-caret-right";
  }
}

function rek1(){}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<li style="font-size: 25px; color: #CF8467" onclick="rek1()"> 70789 <i class="fa fa-caret-right" onclick="change('iconcaret')" id="iconcaret"></i> </li>

或者，这里我们传递元素：

function change(iconcaret){
  if(iconcaret.className=="fa fa-caret-right"){
    iconcaret.className = "fa fa-chevron-down";
  }else{
    iconcaret.className = "fa fa-caret-right";
  }
}

function rek1(){}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<li style="font-size: 25px; color: #CF8467" onclick="rek1()"> 70789 <i class="fa fa-caret-right" onclick="change(iconcaret)" id="iconcaret"></i> </li>

【讨论】：

成功了！谢谢，我忘了使用链接 rel，只使用了 fontawesome 脚本

【解决方案2】：

这是一个简单的 html 和 javascript 代码，用于更改按钮单击时的图标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <i class="fas fa-eye"></i>

    <button id="button">Change Me!</button>

    <script>
        const icon = document.querySelector("i")

        document.getElementById("button").addEventListener("click" , () => {
            icon.classList.remove("fa-eye")

            icon.classList.add("fa-tree")
        })
    </script>
    
</body>
</html>

【讨论】：

【解决方案3】：

首先，您需要确保您的函数正在触发，所以问题不在于按钮/侦听器有什么。

如果函数正在触发，您可以替换整个元素，如下所示：

document.getElementById('iconcaret').innerHTML = '<i class="fa fa-caret-right</i>';

如果你不想完全替换元素，这里直接来自jQuery's AddClass。

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

你也可以检查一个元素是否有这个类，同样来自jQuery's HasClass

$( "#mydiv" ).hasClass( "bar" )

【讨论】：