如何使用j Query将字体Awesome更改为minus

Question

我有一个加号字体很棒的图标，我想把它改为减号时，用户点击加号，反之亦然

我在我的HTML表中使用它来展开一些行

​

$('i').click(function() {

  $(this).find('i').toggleClass('fas fa-plus fas fa-minus');
});

.icon {
  color: green;
  cursor: pointer;
  margin-right: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>

​

Answer 1

不需要使用find $this表示i，并切换多pal类来更改class和形状，如下所示。

​

$('i').click(function() {
  $(this).toggleClass('fa-plus green fa-minus red');
});

.icon {
  color: green;
  cursor: pointer;
  margin-right: 6px;
}
.green{
color: green;
}
.red{
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>

​

Answer 2

您就快到了，但是您的选择器是不正确的(您可以在事件处理程序中使用$(this)来引用所单击的元素)：

​

$('i').click(function() {
  $(this).toggleClass('fa-plus fa-minus');
  var color = ($(this).hasClass('fa-minus')) ? 'red' : 'green';
  $(this).css('color', color);
});

.icon {
  color: green;
  cursor: pointer;
  margin-right: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>

​

Answer 3

你必须删除find()，它将会工作。

​

$('i').click(function() {

  $(this).toggleClass('fa-plus fa-minus');
  $(this).hasClass('fa-minus')? $(this).css('color','red'): $(this).css('color','green');
});

.icon {
  color: green;
  cursor: pointer;
  margin-right: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>

​