Javascript 单击时切换图标，不起作用

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

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

$（'.heart-toggle-empty'）。单击（函数（）{
$（this.find（'i'）.toggleClass（'fas fa heart'））
});
$（'.heart-toggle-full'）.blur（函数（）{
$（this.find（'i'）.toggleClass（'fa-heart'））
});
。产品图标心脏，
.产品图标心满{
宽度：31%；
文本对齐：居中；
字号：1.5em；
颜色：#D6D4；
光标：指针；
}
.产品图标心脏：悬停，
.产品图标心满：悬停{
宽度：31%；
文本对齐：居中；
字号：1.5em；
颜色：#8ABE57；
}
尝试下一个代码并告诉我是否有效：

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

$（'.heart-toggle-empty'）。单击（函数（）{
$（this.empty（）.html（“”）；
});

另外，如meteor所说，添加jQuery库。
您的单击处理程序切换了错误的类，我在下面的代码片段中修复了它们，现在您可以在满和空之间切换任意一个心：


$（'.heart-toggle-empty'）。单击（函数（）{
$（this.find（'i'）.toggleClass（'far-fas'））
});
$（'.heart toggle full'）。单击（函数（）{
$（this.find（'i'）.toggleClass（'far-fas'））
});
。产品图标心脏，
.产品图标心满{
宽度：31%；
文本对齐：居中；
字号：1.5em；
颜色：#D6D4；
光标：指针；
}
.产品图标心脏：悬停，
.产品图标心满：悬停{
宽度：31%；
文本对齐：居中；
字号：1.5em；
颜色：#8ABE57；
}
好的，给你。我必须重写一点代码才能得到你们想要的，但现在可以了


$（'.heart-toggle'）。单击（函数（）{
$（this.find（'i'）.toggleClass（'fas far'）；
});
。产品图标心脏{
宽度：31%；
文本对齐：居中；
字号：1.5em；
光标：指针；
}
.产品图标心形.心形切换{
颜色：#D6D4；
}
.product icon heart.heart toggle.fas{
颜色：#8ABE57；
}
.产品图标心形。心形切换：悬停{
颜色：#8ABE57；
}

您似乎缺少jquery库..锚定标记会发生什么情况？我只是清空他的内容并用新的html代码替换。anchor标签的类是“heart toggle empty”。是的，这只是第一个例子。锚定标签不会被移除。从jQuery的文档中：empty（）“从DOM中删除匹配元素集的所有子节点”。它几乎可以正常工作。唯一缺少的是“完整的心”在单击时保持绿色。不是的，它是灰色的。有什么想法吗？下面是正在发生的事情的记录：因为您正在使用引导。您也可以添加文本成功类。我将使用此更改编辑以前的代码。您始终可以创建自定义CSS类并将其置于文本成功的替换中。