up vote 1 down vote favorite
1
share [g+] share [fb]

I am trying to copy the Like button of Facebook, but the problem is on the specific place to click to change the button.

When it's not yet liked, the user should click anywhere on the button and the button will change on the gray state (already liked). This is already done.

But the problem is when unliking it, I think I'm not using jquery correctly so that it should set to the blue state(not liked), only if it is clicked on the image.

Here's what I've made, take a look at it so you can understand better: https://glenrdsgn.com/button/

link|improve this question
62% accept rate
feedback

1 Answer

up vote 1 down vote accepted

I've added a class '.unlike' to the ch2 div so that the HTML looks like this:

<div id="like" >
    <div id="ch1" class="btn btn-empty no-like">
        <div class="pad">
            <div class="like-text">
                <div id="ch2" class="unlike data-empty"></div>
                <div class="txt">Like</div>
            </div>
        </div>
    </div>
</div>

Then the following jQuery does what I think you mean:

$(function() {
    $('.btn').live('click', function() {
        $('#ch1').attr('class', 'btn like btn-fill');
        $('#ch2').attr('class', 'unlike data-fill');
    });
    $('.unlike').live('click', function() {
        $('#ch1').attr('class', 'btn btn-empty no-like');
        $('#ch2').attr('class', 'unlike data-empty');
        return false;
    });
});

The return false is needed as otherwise both events are triggered. Hope this helps

link
Thank you so much! This really helped a lot! – weyhei 1 min ago
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.