Question

我跟着this创建自定义字体图标并在我的代码中添加了链接我在那里创建了SVG图标并添加了自定义名称

在我的代码中，我有多个按钮和多个＆＃39;

现在我正在使用这样的所有3个图标

<div class="col-sm-10 col-sm-offset-1">
    <a class="btn1"><i class="ic-like"></i></a>
    <a class="btn2"><i class="ic-dislike"></i></a>
    <a class="btn3"><i class="ic-happy"></i></a>
</div>

现在我的代码中应该有3个图标

所以我在我的代码Toogle图标中给出了这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("a").click(function(){
        $("i").toggleClass("ic-like2");
    });
   $("a").click(function(){
        $("i").toggleClass("ic-dislike2");
    });
   $("a").click(function(){
        $("i").toggleClass("ic-happy2");
    });


});
</script>

我的图标名称是ic-like，ic-like2，ic-dislike，ic-dislike2，ic-happy，ic-unhappy2＆＃39;

但现在的问题是，当我打开The Page时，所有图标都会被转换为ic-like2

当我点击它恢复正常＆＃39; ic＆＃39;

但我想表现出类似于＆＃39;并点击它应该toogle＆＃39; ic-like2＆＃39;

任何人都可以建议我这样我不能按下按钮和＆＃39; a＆＃39;标签在这里几乎所有其他div在bootstrap中都使用相同的标签它们很多所以我需要在不改变其他的情况下为这3个提供。如果我在Button中加载其他Css在＆＃39; a＆＃39;标签也加载其他css

更新

现在当我点击3个图标中的任何一个时，除了这3个图标<a中的图标都在切换空白

任何人都可以建议我如何解决这个问题

Answer 1

你可以这样的事情。您需要使用jquery find选择器函数。

$(document).ready(function(){
         $("a.btn1").click(function() {   
               $(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down");
      
             });
            
             $("a.btn2").click(function(){    
                 
                  $(this).find("i").toggleClass("fa-smile-o fa-frown-o"); 
            }); 
        
            $("a.btn3").click(function(){ 
        
               
                $(this).find("i").toggleClass("fa-unlock fa-unlock-alt"); 
            }); 
     });

.fa {
 font-size: 58px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="col-sm-10 col-sm-offset-1">
    <a class="btn1"><i class="fa fa-thumbs-o-up"></i></a>
    <a class="btn2"><i class="fa fa-smile-o"></i></a>
    <a class="btn3"><i class="fa fa-unlock"></i></a>
</div>

Answer 2

嗨，这可能对你有帮助

    $(".btn1 > i").click(function(){
        $(this).toggleClass("ic-like2 ic-like");
    });
   $(".btn2 > i").click(function(){
        $(this).toggleClass("ic-dislike2 ic-dislike");
    });
   $(".btn3 > i").click(function(){
        $(this).toggleClass("ic-happy2 ic-happy");
    });

如何设置多个字体图标

2 个答案: