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

Question

我需要一个 fontawesome 图标，以便在单击时更改为另一个 fontawesome 图标。我有一个 "empty" 心形图标，点击后需要更改为 "full heart"。我已经搜索了不同的 JS 脚本，但 none 似乎有效，所以我显然做错了什么，但不能说出是什么。

版本我忘了提，对此我深表歉意，一个图标应该取代另一个图标。基本上首先我会看到灰色的 "empty" 心形。移动时，空心应该变成绿色（只是边框），一旦它被点击，然后心变成 "full" 和绿色。

$('.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-empty').click(function() {
  $(this).empty().html('<i class="fas fa-heart text-success"></i>');
});

此外，如 meteor 所说，添加 jQuery 库。

Answer 2

您的点击处理程序切换错误类，我在下面的代码片段中修复了它们，现在您可以在满心和空心之间切换：

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

.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">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


<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 3

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

$('.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>

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

Switch fontawesome icon on click, not working

javascript

font-awesome-5