如何托管多个字体图标 [英] How to Toogle Multiple Font Icons

问题描述

我遵循此创建自定义字体图标并在我的代码$ b中添加了链接$ b在那里我创建了SVG图标并添加了自定义名称

在我的代码中，我有多个按钮和多个'

现在我正在使用像这样的所有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个图标应该放在我的代码中

所以我在Code to Toogle图标中给出了这个

 < script src =https：// ajax .googleapis.com / AJAX /库/ jquery的/ 3.3.1 / jquery.min.js>< /脚本> 
 
< 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-unhappy2'

但现在问题是，当我打开页面时，所有图标都被标记为 ic-like2 code>

当我点击它回到正常的'ic-like'

，但是我想要显示'类似ic'，并点击它应该toogle'ic-like2'

任何人可以建议我这种类型，我不能在按钮和'a '标签在这里几乎所有其他divs在bootstrap中使用相同的标签，他们是很多因此，我需要给这3只不改变其他如果我给按钮加载其他CSS在'a'标签也加载其他css

更新

现在当我点击3个图标中的任何一个时，在< a 中有空格切换

任何人都可以告诉我如何关闭 p>

解决方案

你可以这样。你需要为此使用jquery find 选择器函数。

  $（document）.ready（function（）{$（a （））; $（this）.find（i）。toggleClass（fa-thumbs-o-up fa-thumbs-o-down）;}）; $（a （））; $（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 0.1 / jquery.min.js>< / SCR ipt>< link rel =stylesheethref =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>

I followed this to create Custom Font Icons and Added the links in my Code over there I have Created Icons form SVG and added Custom Names

In my Code I have Multiple Buttons and Multiple '

Now I am using all 3 icons like this

<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>

Now I have 3 Icons Should Toogle in my Code

So I have Given this in my Code to Toogle icons

<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>

My icon names are 'ic-like,ic-like2,ic-dislike,ic-dislike2,ic-happy,ic-unhappy2'

But Now Problem is that when I open The Page all the icons are toogled to ic-like2

and when I click its back to normal 'ic-like'

but I want to show 'ic-like' and on click it should toogle 'ic-like2'

can any one suggest me on this kind I cant give in button and 'a' tag here almost all other divs are using same tags in bootstrap they are many So I need to give for these 3 only without changing other If I give in Button its loading other Css in 'a' tag also its loading other css

Update

Now When I onclick on any of the 3 icons except these 3 the icons which are there in <a are switching blank

can any one suggest me how to turn this off

解决方案

You can so something like this. You need to use jquery find selector function for this.

$(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>

这篇关于如何托管多个字体图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！