잘못된 상태

Question

업데이트

var text = $('a.loveit strong'); 

    jQuery (function ($) { 


     var loved = false; 

     $('a.loveit').bind('click',function(event){ 
      event.preventDefault(); 

      loved = !loved; 
      // toggles clicked state so false becomes true. 

      if(!loved){ 
       originalLove(); 
      } 
      else{ 
       changeLove(); 
      } 
     }); 

    }); 

    function originalLove(){ 

     text.transition({opacity: 0, scale: 0}, 100, 'easeOutBack', function() { 

        $(".icn-heart").toggle(); 
         // console.log('LOVE'); 
        text.html("LOVE"); 
         text.css({ 
         color : '#fff', 
         position : 'relative', 
         left : '0' 
        }); 
        text.transition({opacity: 1, scale:1}, 500, 'easeOutBack'); 

       }); 

    } 

    function changeLove(){ 
      text.transition({opacity: 0, scale: 0}, 100, 'easeOutBack', function() { 


        $(".icn-heart").toggle(); 
         // console.log('LOVED'); 
        text.html("LOVED!"); 
        text.css({ 
         color : '#2b7878', 
         position : 'relative', 
         left : '-11px' 
        }); 

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

       }); 
    } 

상태는 진실과 거짓이 있어야합니다. 기본 "마음 사랑"(흰색)을 클릭하면 파란색 텍스트 "사랑"으로 바뀝니다. 그 반대입니다. 하지만 텍스트를 서로 바꿀 때 둘 다 작동하지 못했습니다.

BTW, 나는 Grails의

에서 HTML과 easeoutback

업데이트에 대한 사랑/사랑의 ​​체류를 올바른 번호로 지속 할 수 없습니다

<g:set var="personal" bean="personalService" /> <g:if test="${personal.lovedThis(portfolio.id, session.userId)}"> <div class="love-text"> <strong style="opacity: 1; transform: scale(1, 1); color: rgb(43, 120, 120); position: relative; left: -11px;">LOVED!</strong> </g:if> <g:else> <i class="icn-heart"></i> <div class="love-text"> <strong style="opacity: 1; transform: scale(1, 1); color: rgb(255,255,255); position: relative; left: 0;">LOVE</strong> </g:else> 

을 통과 플러그인을 사용하고 있습니다. 클릭하면 FF와 Chrome에서 LOVED가 '1'로 표시되고 다시 클릭하면 LOVE가 '1'로 잘못 표시됩니다. '0'이어야합니다. 또한 다른 브라우저에서 다시 클릭하면 텍스트를 바꿀 수 없습니다. 궁금한 점이 있다면

var loved = false; 

가 원인입니까?

는 도움을 감사합니다

Answer 1

당신은이 : 콜백에서

var loved = false; 
loved = !loved; 

이 너무 loved 항상 명시 적으로 허위 후 모든 클릭 이벤트에 대한 반전으로 설정됩니다. 위의 사랑하는 변수를 정의하려면 클릭을 바인딩하기 전에 각 클릭에 대해 앞뒤로 전환 할 수 있습니다.

text 변수가 상위 변수이므로 콜백 함수가 변수에 액세스 할 수 있도록 선언해야합니다.

var text = $('a.loveit strong'); 

jQuery (function ($) { 
    var loved = false; 

    $('a.loveit').bind('click',function(event){ 
     event.preventDefault(); 

     // toggles clicked state 
     loved = !loved; 

     if(!loved) { 
      originalLove(); 
     } else { 
      changeLove(); 
     } 
}); 

Answer 2

문제는 당신의 사랑하는 선언에서 온다 :

var loved = false; 
loved = !loved; 

당신이 그것이 상태대로 클릭 거짓 매번에 initialzed 있기 때문에 항상 true가됩니다 사랑.

이벤트 처리기 외부에서 선언해야합니다. jsFiddle