jQuery:使用 AJAX 调用更改按钮的类别

2023-12-01

我正在构建一个类似/不同的系统,我有一个按钮,其中有一个类似的类,如果我单击它,数据就会插入到数据库中,并且该类会更改为不同的。

与假设拉动另一个ajax调用不同的是,它会删除实际的like,但它不起作用,当类更改时,它会执行like类应该做的事情,并且只有在我刷新页面时它才起作用。

php code

<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 调用之前做了一个不同的警报作为示例来测试它。

那么云有人给我提示吗?


我在我的应用程序上做了类似的事情,我使用了这个逻辑:

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 调用,您将拥有更少的代码

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery:使用 AJAX 调用更改按钮的类别 的相关文章

随机推荐