最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Jquery ajax addClass issue - Stack Overflow

programmeradmin4浏览0评论

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 ment">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?

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 ment">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?

Share Improve this question edited Sep 4, 2012 at 7:01 Danil Speransky 30.5k6 gold badges69 silver badges78 bronze badges asked Jul 29, 2012 at 11:36 SideSide 1,7519 gold badges36 silver badges65 bronze badges 1
  • And what is the behavior you're expecting? – Marcelo De Zen Commented Jul 29, 2012 at 11:40
Add a ment  | 

3 Answers 3

Reset to default 4

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');
            }

        }
    });
});

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)

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.

发布评论

评论列表(0)

  1. 暂无评论