javascript - 单击切换 fontawesome 图标，不起作用

Question

我需要一个 fontawesome 图标，以便在单击时更改为另一个 fontawesome 图标。我有一个“空心”心形图标，单击后需要更改为“满心”。我已经搜索了不同的 JS 脚本，但似乎都没有用，所以我显然做错了什么，但无法说出是什么。

版本我忘了提，对此我深表歉意，一个图标应该取代另一个图标。基本上首先我会看到灰色的“空”心。移动时，空心应该变成绿色(只是边框)，一旦它被点击，心就会变成“满的”和绿色。

$('.heart-toggle-empty').click(function() {
  $(this).find('i').toggleClass('fas fa-heart')
});
$('.heart-toggle-full').blur(function() {
  $(this).find('i').toggleClass('far fa-heart')
});

.product-icon-heart,
.product-icon-heart-full {
  width: 31%;
  text-align: center;
  font-size: 1.5em;
  color: #D6D4D4;
  cursor: pointer;
}

.product-icon-heart:hover,
.product-icon-heart-full:hover {
  width: 31%;
  text-align: center;
  font-size: 1.5em;
  color: #8ABE57;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


<div class="col-12 product-icons">
  <div class="col-4 d-inline-block product-icon-heart mr-0">
    <a class="heart-toggle-empty">
      <i class="far fa-heart"></i>
    </a>
  </div>
  <div class="col-4 inline-block product-icon-heart-full mr-0">
    <a class="heart-toggle-full">
      <i class="fas fa-heart"></i>
    </a>
  </div>
</div>

Answer 1

好的，给你。我不得不重写一些代码才能得到你想要的，但它现在可以工作了。

$('.heart-toggle').click(function() {
  $(this).find('i').toggleClass('fas far');
});

.product-icon-heart {
  width: 31%;
  text-align: center;
  font-size: 1.5em;
  cursor: pointer;
}
.product-icon-heart .heart-toggle {
  color: #D6D4D4;
}
.product-icon-heart .heart-toggle .fas {
  color: #8ABE57;
}
.product-icon-heart .heart-toggle:hover {
  color: #8ABE57;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


<div class="col-12 product-icons">
  <div class="col-4 d-inline-block product-icon-heart mr-0">
    <a class="heart-toggle" href="#">
      <i class="far fa-heart"></i>
    </a>
  </div>
  <div class="col-4 inline-block product-icon-heart mr-0">
    <a class="heart-toggle full" href="#">
      <i class="fas fa-heart"></i>
    </a>
  </div>
</div>