Note that there are some explanatory texts on larger screens.

plurals
  1. POIncorrect state of the swapped text
    primarykey
    data
    text
    <p><strong>Update</strong> </p> <pre><code> 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'); }); } </code></pre> <p>The state should have true and false. If click default "heart Love" (white), it should swap to the blue text "Loved". Vice versa. But I couldn't get both working when swapping between texts.</p> <p>BTW, I am using transit plugin for easeoutback</p> <p><strong>Update with HTML in Grails</strong></p> <pre><code>&lt;g:set var="personal" bean="personalService" /&gt; &lt;g:if test="${personal.lovedThis(portfolio.id, session.userId)}"&gt; &lt;div class="love-text"&gt; &lt;strong style="opacity: 1; transform: scale(1, 1); color: rgb(43, 120, 120); position: relative; left: -11px;"&gt;LOVED!&lt;/strong&gt; &lt;/g:if&gt; &lt;g:else&gt; &lt;i class="icn-heart"&gt;&lt;/i&gt; &lt;div class="love-text"&gt; &lt;strong style="opacity: 1; transform: scale(1, 1); color: rgb(255,255,255); position: relative; left: 0;"&gt;LOVE&lt;/strong&gt; &lt;/g:else&gt; </code></pre> <p>Unable to make Love/Loved stay persist with correct number. If I click and it shows LOVED with '1' on FF and on Chrome, I click again and it shows LOVE with '1' which is wrong. It should be '0'. Also if I click again on different browser, it will not swap text. I am wondering if </p> <pre><code>var loved = false; </code></pre> <p>is the cause?</p> <p>Appreciate the help</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload