Javascript 更改悬停时的图标（引导）

我有一个图标：

<span class='glyphicon glyphicon-heart-empty' aria-hidden='true'></span>

然后，如果用户单击图标，按钮将显示图标图标

心形

，如果用户再次单击图标，则将其状态恢复为

心形空

---

我看到这个JSFIDLE在悬停时显示一个图标，而我希望它完全改变图标。我曾尝试在JSFIDLE中使用这种方法，但我无法让它做我想做的事情。

您可以将

：before

伪元素的

content

属性更改为所需图标的属性

Css

span.clicked:before {
  content: "\e005";
} 

通过在单击图标时添加类，可以应用新的图标代码

JS

document.querySelector('span').addEventListener('click', function (e) {
    e.target.classList.toggle('clicked')
});

---

您可以看到下面的示例

<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>
<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>
<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>

---

fiddle示例：

fiddle中的示例使用jQueryUI，而您使用的是引导。方法是一样的，只需

切换类（'glyphicon-heart-empty glyphicon-heart'）

。或者，你可以直接使用glyphicons的unicode值单独使用CSS。谢谢你，CSS对我来说非常有效，JS对我来说不起作用，但我可能遗漏了一些东西。是否有一种方法可以获取它的状态，并在用户再次单击图标之前保持该状态？例如，如果用户单击图标，它现在是

heart

，如果我转到，比如说

home.php

，然后返回到创建图标的

profile.php

，图标将重置为

heart empty

。您可以使用

localStorage

或cookie保存该信息。不过，这一切都在客户机上，这表明服务器上存储了诸如“heart'ing”之类的内容。你看过我链接到的演示吗？它显示了一个js的工作版本是的，我看过这个演示，现在我已经将js合并到我的系统中了，好消息，它工作了！然而，这是一个有点油嘴滑舌？我需要在图标上单击两下，才能从

心空

变为

心

。

<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>
<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>
<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>

$("div").click(function() {
        var icon = $("span.glyphicon", this);
        var isClicked = icon.data("clicked");
    icon.data("clicked", !isClicked);
}).hover(function () {
    // hover in      
    var icon = $("span.glyphicon", this);
    var isClicked = icon.data("clicked");
    var remCls = isClicked ? "glyphicon-heart" : "glyphicon-heart-empty",
            addCls = isClicked ? "glyphicon-heart-empty" : "glyphicon-heart"
    icon
        .removeClass(remCls)
      .addClass(addCls);
}, function () {
    // hover out
    var icon = $("span.glyphicon", this);
    var isClicked = icon.data("clicked");
    var remCls = isClicked ? "glyphicon-heart-empty" : "glyphicon-heart",
            addCls = isClicked ? "glyphicon-heart" : "glyphicon-heart-empty"
    icon
        .removeClass(remCls)
      .addClass(addCls);
});