在javascript中切换心形的html代码

Question

我想添加一个心形图标作为按钮.点击它应该切换填充/未填充.我有两个 - ♡和❤但是当我将它作为文本进行比较时.我不能 因为它看起来像一个图像.这是我的尝试:

function setMyFavorite(){
 alert('SetMyFavorite for '+ $("#heart").html());
 if($("#heart").html()=="♡"){
    $("#heart").html("❤");
 }

 if($("#heart").html()=="❤"){
        $("#heart").html("♡");
 }
}

这是我的HTML代码

<div id="heart" title="Set as Favorite" onclick="javascript:setMyFavorite();">&#9825;</div>

我怎么比较呢？

Answer 1

您可以使用unicode字符进行比较.

const whiteHeart = '\u2661';
const blackHeart = '\u2665';
const button = document.querySelector('button');
button.addEventListener('click', toggle);

function toggle() {
  const like = button.textContent;
  if(like==whiteHeart) {
    button.textContent = blackHeart;
  } else {
    button.textContent = whiteHeart;
  }
}

<button>?</button>

Answer 2

像这样添加Html按钮

<div>
  <i class="heart fa fa-heart-o"></i>
</div>

添加CSS对于此按钮

.heart {
  font-size: 25px;
    color:red;
}

Javascript来选择和取消选择按钮

$(".heart.fa").click(function() {
  $(this).toggleClass("fa-heart fa-heart-o");
});

在这里查看jsfiddle演示