小编典典

jQuery:通过AJAX调用更改按钮的类

ajax

我正在建立一个Like /
Unlike系统,我有一个按钮,该按钮具有一个类似于类的类,如果单击它,则将数据插入数据库中,并且将该类更改为different。

与假定拉另一个ajax调用不同的是,它删除了实际的类,但不起作用,当类更改时,它执行了类类应做的事情,并且仅当刷新页面时才起作用。

PHP代码

<div class="btn-group pull-right">
<?php
    $like = '<button class="btn btn-primary btn-small like" data-like="'.$user->id.'">
        <i class="icon-thumbs-up icon-white"></i> Like
    </button>';  
    foreach ($user->likes as $likes) {
        if($likes['liked_by'] == Session::get('sentry_user')) {
          $like = '<button class="btn btn-primary btn-small unlike" data-like="'.$user->id.'">
            <i class="icon-thumbs-down icon-white"></i> Unlike
            </button>'; 
            break 1;
         }
    }
    echo $like; 
 ?>
</div>

jQuery的

$('button.like').bind('click', function(){
    var likeId = $(this).data('like');
    $.ajax({
        url: siteUrl + 'profile/like',
        type: "post",
        data: {user_id: likeId},
        dataType: "json",
        context: this,
        beforeSend: function()
        {
            $(this).addClass('disabled');
        },
        success: function(data)
        {
            if(data.status == "like") {
                $(this).removeClass('like')
                .addClass('unlike')
                .append()
                .html('<i class="icon-thumbs-down icon-white"></i> Unlike');
            }
        },
        complete: function()
        {
            $(this).removeClass('disabled');
        }
    });

});

$('button.unlike').bind('click', function(){
    var likeId = $(this).data('like');
    alert('you are about to unlike');


})

我刚刚做了一个与众不同的警报作为示例来对其进行测试,然后再使用它进行ajax调用。

云有人给我提示吗?


阅读 344

收藏
2020-07-26

共1个答案

小编典典

我在我的应用程序上做了类似的操作,我使用了以下逻辑:

的HTML:

<a class="like" onclick="like($(this))"></a>

js:

    function like(_element){

    if($(_element).hasClass('unlike')){

$.ajax(); //do unlike
    $(_element).removeClass('unlike'); // this goes inside the success:function(){} of the ajax call

}else{

     $.ajax(); //do like    
     $(_element).addClass('unlike'); // this goes inside the success:function(){} of the ajax call

}

    }

您也可以仅使用1个ajax调用来重构此示例,您的代码将更少

2020-07-26