jquery - 单击时用动画交换文本

Question

代码:

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

场景是当第一次点击时，原来的“Love”切换为“Loved”。然后在同一区域第二次点击时，会切换回原来的文字“Love”。

我试过了，但是当点击按钮时，文本消失了，然后我在控制台上检查说 "uncaught typeerror: object [object object] has no method 'replace'。我不确定它是什么意思是。我也在查看堆栈溢出，发现一些可能有效，但我认为 if/else 条件在我的能力范围内会更容易理解一些。

帮助和指点将不胜感激。

Answer 1

我想我可以解决您的问题。我已经删除了 text.append(heart); 和 text.remove(heart);。我还确保在您的代码执行之前加载了 dom。

http://jsfiddle.net/Xwtav/5/