Question

我需要一个fontawesome图标才能在单击时更改为另一个fontawesome图标。我有一个“空”的心形图标，单击后需要更改为“全心”。我搜索了不同的JS脚本，但似乎没有一个起作用，因此我显然做错了事，但不知道是什么。

EDITION 我忘记提了，对此我深表歉意，一个图标应该接管另一个图标。基本上，首先我会看到灰色的“空”心。行进时，空的心脏应该变成绿色（只是边界），一旦单击它，心脏就会变成“充满”并呈绿色。

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

也像流星所说的那样，添加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图标，不起作用

3 个答案: