스왑 텍스트는

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"으로 다시 전환됩니다.

나는 이것을 시도했으나 버튼을 클릭 할 때 텍스트가 사라진 다음 "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/

Answer 2

왜 onclick 처리기에서 텍스트가 포함 된 div를 제거 하시겠습니까?

것은 여기 데모 이후 http://loadmycode.com/build/x1dcI2Xr8/7
, 내가 함수 .transition를 찾을 수 없습니다()이며,이 라인은 내가 변경 한 클릭 이벤트 기능

text.remove(heart); 

를 형성 제거하십시오, 나는 그것을 대체했다. animate()