CODEWITHSUNDEEP
javascriptjquery
StudioTime
StudioTime

Reputation: 23959

jquery show/hide being ignored

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?

Upvotes: 0

Views: 146

Answers (3)

StudioTime
StudioTime

Reputation: 23959

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.

Upvotes: 0

user1988292
user1988292

Reputation:

Do you add the html to DOM anywhere?

If not, try this:

$(html).find('.like').show();
$(html).find('.unlike').hide();

Upvotes: 2

jholloman
jholloman

Reputation: 1979

You're creating elements with duplicate id attributes: id="'+image.article_id+'" You'll need to change this so that they are unique which is required. ex:

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

Upvotes: 0

Related Questions