jQuery ajax addClass问题

Question

First sorry im a big beginner and just experimenting, and I made a similar wall like facebook with oembed.

And would like to add a like, and dislike button too.

I started with the like button, it works, likes, and unlikes too, and the cookie saves the class value perfectly.

My problems is the ajax call, so actually when I click on the like button it overwrites all anchors href val and adds a class to all not on what click.

here is my code

jquery

var cookieLike = "like_"
$('a.like').each(function(){
    var id = $(this).attr('href'), cookieLiked = cookieLike + id;

    switch($.cookies.get(cookieLiked) ) {
        case "unliked":
            $(this).removeClass('btn-success');
        break;
        case "liked":
            $(this).addClass('btn-success');
        break;
    }
}).on('click', function(e){
    e.preventDefault()
    var likeId = $(this).attr('href');
    $.ajax({
        url: "<?php echo base_url(); ?>stream/like/" + likeId ,
        type: "post",
        data: likeId,
        dataType: "json",
        success: function(like)
        {

            if(like.likeStatus == "unliked") {
                $('a.like').attr('href', likeId).removeClass('btn-success');
                $.cookies.set(cookieLike + likeId, 'unliked');

            }else if(like.likeStatus == "liked") {
                $('a.like').attr('href', likeId).addClass('btn-success');
                $.cookies.set(cookieLike + likeId, 'liked');

            }

        }
    });

});

html

<div class="stream-bottom">
    <a href="#" class=" btn btn-mini comment">Komment</a>
    <div class="pull-right like-options">
        <a href="<?php echo $sp->sid; ?>" class=" btn btn-mini like"><i class="icon-thumbs-up" title="tetszik"></i> </a>
        <a href="<?php echo $sp->sid; ?>" class=" btn btn-mini dislike"><i class="icon-thumbs-down" title="nem tetszik"></i></a>
    </div>
</div>

could please someone point out what i am missing?

Answer 1

Bind the target element (the clicked link) and reference it in the success callback

In the .on('click') callback

var $link = $(this);

In the success callback use

$(this).attr('href', likeId)

instead of

$('a.like').attr('href', likeId)

Answer 2

Maybe:

.on('click', function (e) {
    e.preventDefault();

    var button = $(this);
    var likeId = button.attr('href');

    $.ajax({
        url: "<?php echo base_url(); ?>stream/like/" + likeId,
        type: "post",
        data: likeId,
        dataType: "json",

        success: function (like) {
            if (like.likeStatus == "unliked") {
                button.removeClass('btn-success');
                $.cookies.set(cookieLike + likeId, 'unliked');
            } else if (like.likeStatus == "liked") {
                button.addClass('btn-success');
                $.cookies.set(cookieLike + likeId, 'liked');
            }

        }
    });
});

Answer 3

When you use $("a") or $("a.like") you are referring to the entire set of anchor tags or anchor tags with 'like' as the class name. To specifically use the anchor tag on which you have clicked use $(this) variable.

That will give you the element on which the event got generated and in this case the anchor tag on which you clicked.