Jquery ajax addClass issue

Question

首先很抱歉，我是一个大初学者，只是在做实验，我用oembed制作了一个类似于墙的facebook。

我也想添加一个喜欢和不喜欢按钮。

我从点赞按钮开始，它也可以工作，点赞和不点赞，cookie完美地保存了类值。

我的问题是ajax调用，所以实际上，当我点击"点赞"按钮时，它会覆盖所有锚hrefval，并在所有锚中添加一个类，而不是点击什么。

这是我的代码

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>

能请某人指出我遗漏了什么吗？

Answer 1

可能：

.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 2

绑定目标元素（点击的链接）并在成功回调中引用它

在.on（'click'）回调中

var $link = $(this);

在成功回调中使用

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

而不是

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

Answer 3

当您使用$("a")或$("a.like")时，您指的是整个锚定标记集或以'like'作为类名的锚定标记。要特别使用您单击的锚点标记，请使用$（this）变量。

这将为您提供生成事件的元素，在本例中为您单击的锚点标记。