Question

I have a page where a user can ‘like’ an article.

When the page first loads I want to show if they’ve already liked an article.

The code I’m using to add html to the DOM is:

html += '<div class="gl_like">';
html += '<a href="#" class="like" id="'+image.article_id+'"><div class="bLike" title="Like this article"></div></a>';
html += '<a href="#" class="unlike" id="'+image.article_id+'"><div class="bUnlike" title="Unlike this article"></div></a>';
html += '</div>';

Now I’m checking what the API throws back as to whether a user has already liked an article

if(image.numLikes<1){
$('.like').show();
$('.unlike').hide();
html += 'wooo'; // to test the code works, it does
} else {
$('.like').hide();
$('.unlike').show();
}

The “wooo” is added to the html but the show/hide functions are being ignored. The “.like” class is shown on every article.

What I want to happen is the “.like” class shows if user hasn’t liked an article and “.unlike” class shows if they have.

Am I missing something here?

Answer 1

Got it guys, thanks:

if(image.numLikes<1){
    html += '<a href="#" class="like" id="'+image.article_id+'"><div class="bLike" title="Like this article"></div></a>';
    html += '<a href="#" class="unlike" id="'+image.article_id+'" style="display:none;"><div class="bUnlike" title="Unlike this article"></div></a>';
    } else {
    html += '<a href="#" class="like" id="'+image.article_id+'" style="display:none;"><div class="bLike" title="Like this article"></div></a>';
    html += '<a href="#" class="unlike" id="'+image.article_id+'"><div class="bUnlike" title="Unlike this article"></div></a>';
    }

Instead of using show/hide its easier to literally show or hide.

Not sure I explained the question very well either, apologies for that but thanks a bunch for the answers.