我正在建立一个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调用。
云有人给我提示吗?
我在我的应用程序上做了类似的操作,我使用了以下逻辑:
的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调用来重构此示例,您的代码将更少