如何实现指定自定义字体图标的独立切换且不影响其他元素

问题分析 #

你当前的jQuery代码存在两个核心问题：

• 给所有<a>标签绑定了三次点击事件，每次点击都会对页面上所有的<i>标签执行三个toggleClass操作，这就导致页面加载后类的叠加混乱，而且点击其他无关的<a>标签时，也会误操作它们内部的图标，导致空白。
• 没有针对每个按钮的图标做独立控制，三个切换逻辑互相干扰，自然会出现异常状态。

解决方案 #

我们需要精准定位每个按钮，只操作它内部的图标，并且每个按钮只处理自己对应的类切换。不需要修改现有<a>标签的结构，只需要调整jQuery代码即可：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 针对btn1，切换ic-like和ic-like2
    $(".btn1").click(function(){
        $(this).find("i").toggleClass("ic-like2");
    });
    // 针对btn2，切换ic-dislike和ic-dislike2
    $(".btn2").click(function(){
        $(this).find("i").toggleClass("ic-dislike2");
    });
    // 针对btn3，切换ic-happy和ic-happy2
    $(".btn3").click(function(){
        $(this).find("i").toggleClass("ic-happy2");
    });
});
</script>

代码说明 #

• $(this)：指代当前被点击的<a>元素（比如点击.btn1时，this就是这个按钮本身），确保我们只操作当前点击的按钮。
• find("i")：在当前按钮内部查找<i>标签，不会影响页面上其他<i>元素。
• 每个按钮单独绑定对应的类切换逻辑，互不干扰，点击某个按钮只会切换它自己的图标状态。

这样修改后，页面加载时图标会保持初始的类（比如ic-like、ic-dislike、ic-happy），点击每个按钮只会切换自己对应的图标类，完全不会影响其他<a>标签内的元素。

内容的提问来源于stack exchange，提问作者Don't Be negative