Question

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

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

 if($("#heart").html()=="&#10084;"){
        $("#heart").html("&#9825;");
 }
}

这是我的HTML代码

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

我如何比较它？

Answer 1

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

＆＃13;

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;
  }
}

＆＃13;

<button>♡</button>

＆＃13;

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 demo here

Answer 3

最好的方法是：在按钮中使用字体真棒图标。

您可以使用2种类型的图标solid / light。

所以在切换时你可以替换字体类真棒。

EX。这是你的按钮 <button class="fa fa-heart"></button>

所以在切换时你只需要替换按钮类

由于

Answer 4

像这样的东西会给你一些想法:)玩得开心！

JavaScript的：

<script>
function setMyFavorite(){
var elem = document.getElementById("circle");
//Gets the RGB value
var theColor = window.getComputedStyle(elem, null).getPropertyValue("background-color");
var hex = rgb2hex(theColor);
 if(hex =="#555555"){
    elem.style.backgroundColor = "#ffffff";
 }
else if(hex =="#ffffff"){
    elem.style.backgroundColor = "#555555";
}
//Convert RGB to Hex value
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
</script>

CSS：

 background-color: #555;
 border-radius: 50%;
 border-color:#555;
 border-style: solid;

在javascript中切换心形的html代码

4 个答案: