Question

我有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>

这就是我到目前为止所做的事情，似乎并没有起作用。但我也希望它能够在用户点击它时切换回原始的心脏。有什么建议吗？

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

Answer 1

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

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

演示：Fiddle

Answer 2

一个更简单的解决方案是拥有一个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事件处理程序。

如何使用查询替换单击div中的元素？

2 个答案: