交换文本的状态不正确

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

                });
    }

国家应该有对有错。 如果单击默认的“ heart Love”（白色），则应切换为蓝色文本“ 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>

无法使爱情/被爱留下的数字正确。 如果单击，在FF和Chrome上显示为LOVED的值为“ 1”，则再次单击，它显示为LOVE的值为“ 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