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

                });
    }

国家应该有真假。如果单击默认“心脏爱”（白色），则应交换为蓝色文本“Loved”。反之亦然。但是在文本之间交换时，我无法兼顾两者。

顺便说一下，我正在使用转发插件进行简易回放

使用Grails中的HTML进行更新

<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>

无法让Love / Loved保持正确的数字。如果我点击它并且在FF和Chrome上显示为“1”，我再次点击它会显示爱情为'1'这是错误的。它应该是'0'。此外，如果我再次点击不同的浏览器，它将不会交换文本。我想知道是否

var loved = false;

是原因吗？

感谢帮助

Answer 1

你有：

var loved = false; 
loved = !loved;

在您的回调中，loved将始终显式设置为false，然后针对每个点击事件进行反转。您想在绑定点击之前定义上面所喜爱的变量，这样就可以来回切换每次点击。

您还应该将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;

喜欢将永远是真实的，因为每当你点击它所声明的任何东西时，它都被初始化为假。

您应该在事件处理程序之外声明它。

这是一个没有缓和的更正版本：jsFiddle

交换文本的状态不正确

2 个答案: