0

我有 2 个单独的 div 类，称为 demo-heart 和 demo-coal。我正在尝试启用的功能：当用户单击 fa-heart 图标时，它会变成 fa-coal。当用户点击fa-coal时，它变成了fa-heart。 

<div class = "demo-heart">
    <a href = "#" onclick="myFunction()">
        <i class="fa fa-heart fa-3x"></i>
    </a>
</div>

<div class = "demo-coal">
    <a href = "#" onclick="myFunction()">
        <i class="fa fa-coal fa-3x"></i>
    </a>
</div>

到目前为止，这就是我所拥有的，它似乎不起作用。但我也希望它能够在用户点击它时切换回原来的fa-heart。有什么建议么？

<script>
    function myFunction(){
        $(".demo-heart").html("<a href = '#'><i class='fa fa-coal fa-3x'></i></a>");
    }
 </script>
4

2 回答 2

3

删除内联的 onclick 处理程序，然后使用 jQuery .click()注册点击处理程序

jQuery(function(){
    $('.fa').click(function(){
        $(this).toggleClass('fa-heart fa-coal')
    })
})

演示：小提琴

于 2013-11-11T15:44:10.620 回答
1

一个更简单的解决方案是拥有一个 HTML 结构并在其中切换类：

<div class="demo-heart">
    <a href="#">
        <i class="fa fa-heart fa-3x"></i>
    </a>
</div>

$('.demo-heart a').click(function(e) {
    e.preventDefault();
    $('i', this).toggleClass('fa-heart fa-coal');
});

请注意，我删除了该onClick属性以支持更简洁的 jQuery 事件处理程序。

于 2013-11-11T15:45:07.647 回答