单击时更改 font-awesome 的类名

Question

这是问题所在

这是我的html代码

        <div id="bookmark">
            <i class="far fa-bookmark"></i>
        </div>

我想改变.far到.fas中，反之亦然loop点击时。

这是我更新的 javascript

function changeClass(elem) {
    var i = elem.childNodes[1];
    var c = i.classList;
    console.log(i)
    console.log(c)

    // Change class
    if (c.contains("far")) {
        i.classList.remove("far");
        i.classList.add("fas");
    } else {
        i.classList.remove("fas");
        i.classList.add("far");
    }
}

这是我点击书签图标时浏览器控制台输出的截图

截屏

当我分别在var c传递索引值时，在i.classList[0]我得到svg-inline--fa但我在i.classList[3]而不是far得到undefined值。 所以我该怎么做？

Answer 1

您可以使用 jQuery 执行以下操作：

$("#bookmark").find("i").removeClass("far");
$("#bookmark").find("i").addClass("fas");

Answer 2

假设您希望对单个元素执行此操作，而不是对所有使用 .far 类的元素执行此操作

向标签添加一个 id，如 id="i1" 然后您可以在该元素上添加一个事件侦听器。 收听点击事件，一旦被捕获 - 切换类。

在 body 标签的末尾添加以下内容，即在</body>之前

<script>
document.getElementById('i1').addEventListener('click', (e) => {
    e.target.classList.toggle('far');
    e.target.classList.toggle('fas');
})
</script>

Answer 3

我希望这就是你要找的（演示： https : //jsfiddle.net/hwv0oacL/8/ ）

HTML

<div id="bookmark" onclick="changeClass(this)">
    <i class="far fa-bookmark"></i>
</div>

Javascript

changeClass(elem) {
    var i = elem.childNodes[0].classList;
    
    // Change class far to fas
    if (i.includes("far")) {
        i.classList.remove("far");
        i.classList.add("fas");
    }

    // Get back to original state
    if (i.includes("fas")) {
        i.classList.remove("fas");
        i.classList.add("far");
    }
}

- - - - - - - - - -更新 - - - - - - - - - - - - -

用下面的替换上面的javascript。 它也可以像您想要的那样在循环中工作，因为我们正在通过this关键字获取元素。

JavaScript

function changeClass(elem) {
    var i = elem.childNodes[1];
    var c = i.classList;

    // Change class
    if (c.contains("far")) {
        i.classList.remove("far");
        i.classList.add("fas");
    } else {
        i.classList.remove("fas");
        i.classList.add("far");
    }
}