单击时更改 font-awesome 的类名

Question

Here is the problem

This is my html code

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

I want to change .far to .fas and vice versa in loop when clicked.

This is my updated 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");
    }
}

This is the screenshot of the console output in the browser when I click on the bookmark icon

Screenshot

When I pass the index value in the var c respectively, on i.classList[0] I get svg-inline--fa but I get undefined value in i.classList[3] instead of far . SO WHAT SHOULD I DO?

Answer 1

You can do it like below with jQuery:

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

Answer 2

assuming you want this to be done for single element and not for all the elements that are using .far class

add an id to the tag like id="i1" then you can add an event listener on that element. listening to the click event and once captured - toggle the class.

add the following just before the end of the body tag ie before </body>

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

Answer 3

I hope this is what you are looking for (Demo: 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");
    }
}

-------------------Updated--------------------------

Replace the above javascript with the one below. It will also work in loop like you want because we are getting element by this keyword.

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");
    }
}