I have multiple buttons, when a like button is clicked I would like the font awesome icon to switch as well, however, the way I have it set up the font awesome icon just disappears, but I can see the class change. Not sure where to go from here.
JavaScript
x
3
1
$("button").click(function() {
2
$('#like' + this.id).toggleClass("fa-regular fa-thumbs-up");
3
});
JavaScript
1
10
10
1
<script src="https://kit.fontawesome.com/317f6467e2.js" crossorigin="anonymous"></script>
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3
4
<button class="like-button btn" id="1">
5
<i class="fa-solid fa-thumbs-up" id="like1"></i>
6
</button>
7
8
<button class="like-button btn" id="2">
9
<i class="fa-solid fa-thumbs-up" id="like2"></i>
10
</button>
Advertisement
Answer
If you want to change icon/style just add other class to toggleClass
like:
JavaScript
1
3
1
$("button").click(function() {
2
$('#like'+this.id).toggleClass("fa-solid fa-thumbs-up fa-regular fa-thumbs-up");
3
});
JavaScript
1
11
11
1
<script src="https://kit.fontawesome.com/317f6467e2.js" crossorigin="anonymous"></script>
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3
4
5
<button class="like-button btn" id="1">
6
<i class="fa-solid fa-thumbs-up" id="like1"></i>
7
</button>
8
9
<button class="like-button btn" id="2">
10
<i class="fa-solid fa-thumbs-up" id="like2"></i>
11
</button>