Некорректное состояние измененного текста

Обновить

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)}">
 </g:if></g:set><div><code>
 <span>LOVED!</span>
 
 <g:else>
 
 </g:else></code><div><code>
 <span>LOVE</span>
 
</code> <p> Невозможно сделать Love/Loved неизменным с правильным номером. Если я нажму, и он отобразит LOVED с "1" на FF и в Chrome, я снова нажму, и он показывает LOVE с "1", что неверно. Это должно быть "0". Также, если я снова нажму на другой браузер, он не заменит текст. Мне интересно, если</p> <pre class="prettyprint linenums">var loved = false;

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

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

2 ответа

У тебя есть:

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();
 }
});


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

var loved = false; 
 loved = !loved;

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

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

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

licensed under cc by-sa 3.0 with attribution.