更改类，单击颜色字体真棒图标[复制]

Question

这个问题在这里已有答案：

• jquery change class name 11个答案
• How to change CSS using jQuery? 10个答案

简要说明：当我点击图标时，我只想改变它的类和颜色。这是我的代码

$(".sim-row-edit-icon").click(function(){
	alert("Icon clicked");
  // on click please change icon and color to red
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

点击我想将li类更改为class="fa fa-address-book"，将图标颜色更改为红色。

请指导。

Answer 1

您只需要执行以下操作：

$(".sim-row-edit-icon").click(function(){
  alert("Icon clicked");
  $(this).find('i').toggleClass('fa-address-book');
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

Answer 2

$(".sim-row-edit-icon").click(function(){
	$(this).find('i').removeClass('fa-camera-retro').addClass('fa-address-book').css('color', 'red');
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

Answer 3

你需要：

1. 删除现有的类 - removeClass()
2. 添加一个新类 - addClass()
3. 将颜色css添加到图标 - css()

$(".sim-row-edit-icon").click(function(){
	alert("Icon clicked");
  $(this).find('i').removeClass('fa-camera-retro').addClass('fa-address-book').css('color','red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

Answer 4

您可以使用find()定位元素。然后使用removeClass()删除现有类并使用addClass()添加类。您可以使用.css()来设置样式：

$(".sim-row-edit-icon").click(function(){
  alert("Icon clicked");
  $(this).find('i.fa.fa-camera-retro').removeClass().addClass('fa fa-address-book');
  $(this).find('i').css({color: 'red'});
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>

Answer 5

$(".sim-row-edit-icon").click(function(){
  $(".sim-row-edit-icon > i").removeClass('fa-camera-retro').addClass('fa-address-book');
  $(".sim-row-edit-icon > i").css("color", "red");
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="sim-row-edit-icon">
<i class="fa fa-camera-retro"></i> 
</div>