时间戳

首页 > 解决方案 > 单击时更改字体真棒的类名

javascript - 单击时更改字体真棒的类名

问题描述

这是问题

这是我的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但我得到的undefined值i.classList[3]而不是far. 所以我该怎么做？

标签： javascriptjquery

解决方案

我希望这是您正在寻找的（演示：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替换上面的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");
    }
}

推荐阅读