Неверное состояние переставленного текста

0

Обновить

 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". Наоборот. Но я не мог заставить обоих работать при обмене текстами.

Кстати, я использую транзитный плагин для easyoutback

Обновление с помощью HTML в Grails

<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 неизменным с правильным номером. Если я нажму, и он отобразит LOVED с "1" на FF и в Chrome, я снова нажму, и он показывает LOVE с "1", что неверно. Это должно быть "0". Также, если я снова нажму на другой браузер, он не заменит текст. Мне интересно, если

var loved = false;

является причиной?

Цените помощь

  • 0
    нам может помочь пример html или живой пример на jsfiddle.net
  • 0
    @FelipeP - я добавил короткий образец HTML.
Теги:
grails

2 ответа

0
Лучший ответ

У тебя есть:

var loved = false; 
loved = !loved;

В вашем обратном вызове так loved всегда будет явно установлен на false, а затем инвертирован для каждого события click. Вы хотите определить любимую переменную выше, прежде чем привязать клик, таким образом, она будет переключаться для каждого щелчка, вперед и назад.

Вы также должны объявить 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();
        }
});
Поделиться
  • 0
    да, вы правы, я уже понял это, прежде чем я увидел ваш ответ. классно. сейчас тестирую, работает ли он переключением
  • 0
    Нет, это не работает правильно. Хотя текст «Любовь» и «Любимый» переключается, он остается застрявшим даже в состоянии переключения. я думаю, что love = false - это неправильно, потому что grails будет проверять true / false, а затем назначать его любимым. и я не могу передать переменную grail в js.
Показать ещё 6 комментариев
0

Проблема исходит из вашей любимой декларации:

 var loved = false; 
 loved = !loved;

любимый всегда будет правдой, потому что он инициализируется ложью каждый раз, когда вы нажимаете то, что он утверждает.

Вы должны объявить его вне обработчика событий.

здесь исправлена версия без ослабления: jsFiddle

Поделиться
  • 0
    это пошло не так с государствами. Кажется, что после загрузки страницы она снова испортила бы состояния
  • 0
    это не работает с обновлением выше

Ещё вопросы

Сообщество Overcoder
Наверх
Меню