Question

CODE：

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

情节是，当第一次点击时，原来的“爱”会换成“喜欢”。然后，当在同一区域第二次点击时，它会切换回原始文字“爱”。

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

帮助和指示将不胜感激。

Answer 1

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

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

 text.remove(heart);

我做了更改，这是一个演示http://loadmycode.com/build/x1dcI2Xr8/7
因为，我找不到函数.transition（），我用.animate（）

替换它

Answer 2

我想我可以解决你的问题。我已移除text.append(heart);和text.remove(heart);。此外，我确保在代码执行之前加载了dom。

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

单击时与动画交换文本

2 个答案: