交換文本

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

的情況是，當點擊第一次，原來的「愛」互換「喜愛」。然後當第二次在同一區域點擊時，它會切換回原文「Love」。

我試過這個，但是當點擊按鈕時，文本消失了，然後我檢查了控制檯說"uncaught typeerror: object [object object] has no method ' replace '。我不確定這意味着什麼。我也在瀏覽堆棧溢出，發現了一些可能工作，但我認爲如果/其他條件會容易在我的能力範圍內理解。

幫助和指針將不勝感激。

來源

2013-12-11 kittymeows

我試圖重現您的問題。但是，我無法讓它工作，因爲它找不到「過渡」功能。你使用哪些庫？你也可以提供我們的HTML或uptdate這個小提琴嗎？ http://jsfiddle.net/Xwtav/ – RononDex

@RononDex - 謝謝，在http://ricostacruz.com/jquery.transit/上使用transit插件。我已經更新了小提琴中的html http://jsfiddle.net/Xwtav/1/ – kittymeows

我想我可以解決你的問題。我已經刪除了text.append(heart);和text.remove(heart);。另外我確保在你的代碼執行之前加載dom。

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

來源

2013-12-11 09:46:26 RononDex

看過這個例子，但問題是心圖標會在原來的狀態，然後點擊後，心圖標應該被刪除，文本被更改爲「愛」。然後再次點擊，心臟圖標將被添加回默認狀態，並且文字會變回「愛」。這是不可能的嗎？ – kittymeows

是的，檢查新的小提琴：http://jsfiddle.net/Xwtav/5/。我已將圖標移出「文本」div，並使用'.toggle（）'隱藏/顯示圖標 – RononDex

在小提琴上看到了示例。它適用於心臟圖標的權利？給我幾分鐘嘗試跟隨你的例子。謝謝 – kittymeows

0

爲什麼要刪除包含onclick處理程序中文本的div？

請刪除此行形成click事件函數

text.remove(heart);

我所做的更改，這裏是一個演示http://loadmycode.com/build/x1dcI2Xr8/7
因爲，我無法找到函數.transition（），我取而代之。 animate（）

來源

2013-12-11 09:37:28

+0

需要刪除心臟圖標，並顯示「愛」，當點擊文字。點擊兩次，它會有心臟圖標並顯示「愛」。 – kittymeows

回答

相關問題