javascript - jQuery在不同区域切换

Question

我正在尝试复制 Facebook 的 Like 按钮，但问题出在点击更改按钮的特定位置。

当它尚未被点赞时，用户应单击按钮上的任意位置，按钮将变为灰色状态（已点赞）。这已经完成了。

但问题是当不喜欢它时，我认为我没有正确使用 jquery，因此它应该设置为蓝色状态（不喜欢），只有当它被点击图像时。

这是我所做的，看看它，以便您更好地理解：https ://glenrdsgn.com/button/

Answer 1

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="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', 'data-empty');
        return false;
    });
});

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