Question

请使用点击事件将字体真棒图标从fa-plus更改为fa-minus。任何人都可以帮助我，我会非常感激。谢谢你的不寻常的帮助。我的代码如下。请使用click事件将字体 - 真棒图标从fa-plus更改为fa-minus。任何人都可以帮助我，我会非常感激。谢谢你的不寻常的帮助。我的代码在

之下

＆＃13;

$('.gallery li a').hover(function() {
   		 $('.icon2').removeClass('.icon2');
    // $('').addClass('.icon');
		});

＆＃13;

.icon:after {
		    content: "\f068";  /* this is your text. You can also use UTF-8 character codes as I do here */
		    font-family: FontAwesome;
		    /*float:right;*/
		   	padding-left:5px; 
		   	  
 		}

 		.icon2:after {
 			content: "\f067";  /* this is your text. You can also use UTF-8 character codes as I do here */
		    font-family: FontAwesome;
		    /*float:right;*/
		   	padding-left:5px;
		   	  
 		}
 		.gallery li, .gallery ul  {
			list-style-type: none;
			margin-left: 0px;
			/*margin-top: 50px;*/
			padding: 0;
			width: 20%;
			background: rgba(128, 128, 255, 0.5);
		}
		.gallery ul li {
			width: 100%;
		}
		.gallery li a {
			display: block;
			color: #000;
			padding: 10px 20px;
			text-decoration: none;
			text-transform: uppercase;
			font-size: 1em;
			font-family: 'Bree Serif', serif;

		}
		.gallery li a:hover {
			background-color: #8080ff;
			color: white;
		}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
<body>
	<ul class="gallery">
		<li><a href="#">multicrop thresher <span class="icon2"></span></a></li>
		<ul class="slide-in">
			<li><a href="">Name</a></li>
			<li><a href="">Name</a></li>
			<li><a href="">Name</a></li>
			<li><a href="">Name</a></li>
			<li><a href="">Name</a></li>
			<li><a href="">Name</a></li>
			<li><a href="">Name</a></li>
			<li><a href="">Name</a></li>
		</ul>
	</ul>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js"
  	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  	crossorigin="anonymous"></script>
  </body>
</html>

＆＃13;

Answer 1

您可以使用此代码更改字体真棒图标。

HTML

<i class="fa fa-plus icon-to-change"></i>
<button id="test">Change icon</button>

的jQuery

$('#test').click(function(){
    var ele = $('.icon-to-change');
    if(ele.hasClass('fa-plus')){
        ele.removeClass('fa-plus')
           .addClass('fa-minus')
    }
    else{
        ele.addClass('fa-plus')
           .removeClass('fa-minus')
    }
})

这里是link to fiddle

我希望它有所帮助。

Answer 2

这是解决方案注意：还要检查你的代码是在加载jquery之后添加的

jQuery('.gallery li a').click(function() {
    var element = jQuery('a span.icon');
    if(element.hasClass('icon2')){
        element.removeClass('icon2');
    }
    else{
        element.addClass('icon2');
    }
});

.icon:after {
		    content: "\f068";  /* this is your text. You can also use UTF-8 character codes as I do here */
		    font-family: FontAwesome;
		    /*float:right;*/
		   	padding-left:5px; 
		   	  
 		}

 		.icon2:after {
 			content: "\f067";  /* this is your text. You can also use UTF-8 character codes as I do here */
		    font-family: FontAwesome;
		    /*float:right;*/
		   	padding-left:5px;
		   	  
 		}
 		.gallery li, .gallery ul  {
			list-style-type: none;
			margin-left: 0px;
			/*margin-top: 50px;*/
			padding: 0;
			width: 20%;
			background: rgba(128, 128, 255, 0.5);
		}
		.gallery ul li {
			width: 100%;
		}
		.gallery li a {
			display: block;
			color: #000;
			padding: 10px 20px;
			text-decoration: none;
			text-transform: uppercase;
			font-size: 1em;
			font-family: 'Bree Serif', serif;

		}
		.gallery li a:hover {
			background-color: #8080ff;
			color: white;
		}

<!DOCTYPE html>
    <html>
    <head>
    	<title>Test</title>
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      </head>
    <body>
    	<ul class="gallery">
    		<li><a href="#">multicrop thresher <span class="icon icon2"></span></a></li>
    		<ul class="slide-in">
    			<li><a href="">Name</a></li>
    			<li><a href="">Name</a></li>
    			<li><a href="">Name</a></li>
    			<li><a href="">Name</a></li>
    			<li><a href="">Name</a></li>
    			<li><a href="">Name</a></li>
    			<li><a href="">Name</a></li>
    			<li><a href="">Name</a></li>
    		</ul>
    	</ul>
      <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
      </body>
    </html>

Jquery onclick甚至改变了fontawesome图标

2 个答案: