jQuery ajax addClass问题


                    

对不起,我是个初学者,只是做实验,我用oembed做成了类似Facebook的墙。</ p>

并且也想添加一个喜欢和不喜欢的按钮。</ p>

我从点赞按钮开始,它也可以工作,喜欢和不同,并且cookie可以完美地保存类的值。</ p>

我的问题是ajax调用,因此实际上,当我单击like按钮时,它会覆盖所有锚点href val,并为所有添加的类添加内容。</ p>

这是我的代码</ p>

jquery </ strong> </ p>

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

     开关($ .cookies.get(cookieLiked)){
         案例“不喜欢”:
             $(this).removeClass('btn-success');
         打破;
         案例“喜欢”:
             $(this).addClass('btn-success');
         打破;
     }
})。on('click',function(e){
     e.preventDefault()
     var likeId = $(this).attr('href');
     $ .ajax({
         网址:“ <?php echo base_url();?> stream / like /” + likeId,
         类型:“ post”,
         数据:likeId,
         dataType:“ json”,
         成功:功能(如)
         {

             if(like.likeStatus ==“不喜欢”){
                 $('a.like')。attr('href',likeId).removeClass('btn-success');
                 $ .cookies.set(cookieLike + likeId,'unliked');

             }其他if(like.likeStatus ==“ liked”){
                 $('a.like')。attr('href',likeId).addClass('btn-success');
                 $ .cookies.set(cookieLike + likeId,'liked');

             }

         }
     });

});
</ code> </ pre>

html </ strong> </ p>

  

     Komment
    

         sid;?>“ class =” btn btn-mini dislike“> </ i>
     </ div>
</ div>
</ code> </ pre>

能否请别人指出我所缺少的东西?</ p>
     </ div>

展开原文

原文

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?

3个回答


绑定目标元素(单击的链接)并在成功回调中引用</ p>

在.on('click')回调中</ p>

  var $ link = $(this);
</ code> </ pre>

在成功回调中使用</ p>

  $(this).attr('href',likeId)
</ code> </ pre>

代替</ p>

  $('a.like')。attr('href',likeId)
</ code> </ pre>
     </ div>

展开原文

原文

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)


也许:</ p>

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

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

     $ .ajax({
         网址:“ <?php echo base_url();?> stream / like /” + likeId,
         类型:“ post”,
         数据:likeId,
         dataType:“ json”,

         成功:功能(如){
             如果(like.likeStatus ==“不喜欢”){
                 button.removeClass('btn-success');
                 $ .cookies.set(cookieLike + likeId,'unliked');
             } else if(like.likeStatus ==“ liked”){
                 button.addClass('btn-success');
                 $ .cookies.set(cookieLike + likeId,'liked');
             }

         }
     });
});
</ code> </ pre>
     </ div>

展开原文

原文

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

        }
    });
});


当您使用 $(“ a”)</ code>或 $(“ a.like”)</ code>时,指的是整个</ strong> 锚标签或以“ like”作为类名的锚标签。 要专门使用您单击过的锚标记,请使用$(this)变量。 </ p>

这将为您提供生成事件的元素,在本例中为您单击的锚标记。</ p>
     </ div>

展开原文

原文

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.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐