Jquery 单击时用动画交换文本

代码：

var loved = false; //set status
    $('a.loveit').on('click',function(event){
        event.preventDefault();
        loved = !loved; // toggles clicked state so false becomes true.
        var heart = $('<i class="icn-heart"></i>');
        if(loved){
                $('.love-text').transition({opacity: 0, scale: 0}, 100, 'easeOutBack', function() {

                 var text = $('div.love-text');
                 text.remove(heart);
                 console.log('remove heart');
                 text.html("<strong>LOVED!</strong>");

                $('.love-text').transition({opacity: 1, scale:1}, 500, 'easeOutBack');
            });
        }
        else{
                $('.love-text').transition({opacity: 0, scale: 0}, 100, 'easeOutBack', function() {

                 var text = $('div.love-text');
                 text.append(heart);
                 console.log('add heart');
                 text.html("<strong>LOVE</strong>");

                $('.love-text').transition({opacity: 1, scale:1}, 500, 'easeOutBack');
            });
        }

var=false//设定状态
$（'a.loveit'）。在（'click'，函数（事件）{
event.preventDefault（）；
loved=！loved；//切换单击的状态，使false变为true。
心脏变量=$（''）；
如果（爱）{
$（'.love text'）.transition（{opacity:0，scale:0}，100，'easeOutBack'，function（）{
var text=$（'div.love-text'）；
删除（心脏）；
控制台日志（“移除心脏”）；
html（“LOVED！”；
$（'.love text'）.transition（{opacity:1，scale:1}，500，'easeOutBack'）；
});
}
否则{
$（'.love text'）.transition（{opacity:0，scale:0}，100，'easeOutBack'，function（）{
var text=$（'div.love-text'）；
text.append（心脏）；
console.log（'addheart'）；
html（“爱””；
$（'.love text'）.transition（{opacity:1，scale:1}，500，'easeOutBack'）；
});
}

场景是当第一次点击时，原始“爱”切换到“爱”。然后当第二次点击同一区域时，它将切换回原始文本“爱”

我尝试了这个方法，但当点击按钮时，文本消失了，然后我在控制台上检查说

“uncaughttypeerror:object[object object]没有方法“replace”

。我不确定这是什么意思。我也在查找堆栈溢出，发现了一些可能有效的方法，但我认为if/else条件在我的能力范围内更容易理解

---

帮助和指针将不胜感激。

为什么要删除包含onclick处理程序中文本的div

请从单击事件功能中删除此行

 text.remove(heart);

我做了更改，这是一个演示

---

由于找不到函数.transition（），我将其替换为.animate（）

我想我可以解决您的问题。我已删除了

text.append（heart）；

和

text.remove（heart）；

。此外，我还确保在代码执行之前加载dom

---

我正试图重现您的问题。但是，我无法让它工作，因为它找不到函数“transition”。您使用的是哪些库？您还可以为我们提供html或更新此小提琴吗？@RononDex-谢谢，使用transit插件。我已经更新了小提琴中的html，需要删除心脏图标并显示“loved”当点击文本时。点击两次，它会有心形图标并显示“爱”。看到示例，但问题是心形图标将以原始状态存在，点击后，应删除心形图标并将文本更改为“爱”。然后再次点击，心形图标将添加回默认状态，文本将更改回“爱”。这不可能吗？是的，检查新的小提琴：。我已将图标从“text”div中移出，并使用了

.toggle（）

要隐藏/显示图标，请在fiddle上显示该示例。它适用于心脏图标，对吗？请给我几分钟时间尝试按照您的示例进行操作。谢谢，不，我删除了标记，因为这对图像完全没有影响。我将其替换为div，因为它有一个类。它工作正常。不过有一个问题-为什么我不能将heart声明为变量，即remove（heart）？也是下一个问题-是否可以生成两个包含这些函数的函数，包括转换函数？如果是，我将再次尝试。非常感谢