javascript - 如何使用 jQuery 将字体 Awesome plus 更改为 minus

Question

我有一个加号 Font Awesome 图标，我想在用户点击加号时将其更改为减号，反之亦然

我在我的 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

你快完成了，但是你的选择器不正确(你可以在事件处理程序中使用 $(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>