Question

我建立了一个Like /不同的系统，我有一个按钮有什么样的类，如果我点击它，数据被插入到数据库中，并且类变成不像。

而不是假设要拉另一个ajax调用什么去除了实际的样子，但它不工作，当类改变它preforms类想做的事情，它只适用于，如果我刷新页面。

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


}) 

刚才的不同警惕的例子来测试它befoe我就与它的AJAX调用。

那么云有人给我一个提示？

Answer 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阿贾克斯调用，你将有更少的代码

Answer 2

你也可以使用$(selector).toggleClass();像这样：

的jQuery：

$('button.like,button.unlike').on('click',function(){ 
    $.ajax(
     ... 
     $(this).toggleClass('like unlike'); 
    ); 
}) 

这里有一个jsbin

Answer 3

你可以使用像http://phery-php-ajax.net库，使你能保持你的代码干，你可以重复使用代码，而不必重新绑定click事件： 这将适用于通过ajax添加并且可以随处重复使用的所有按钮

data-remote是远程函数的名称，在这种情况下为动作。它的工作原理使用事件代表团，因此无需单击事件手动绑定到按钮

<div class="btn-group pull-right"> 
<?php 
$like = '<button data-remote="action" class="btn btn-primary btn-small like" data-args="'.Phery::args(array('id' => $user->id, 'perform' => 'like')).'"> 
    <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 data-remote="action" class="btn btn-primary btn-small unlike" data-args="'.Phery::args(array('id' => $user->id, 'perform' => 'unlike')).'"> 
     <i class="icon-thumbs-down icon-white"></i> Unlike 
     </button>'; 
     break 1; 
     } 
    } 
    echo $like; 
    ?> 
</div> 

你喜欢/不象回调

// in your profile/like 

function action($data){ 
    $r = new PheryResponse; 
    // $data['id'] got the ID of the like 
    if ($data['perform'] === 'like'){ 
    $r 
    ->this() 
    ->removeClass('like') 
    ->addClass('unlike') 
    ->phery('set_args', array('id' => $data['id'], 'perform' => 'unlike')) 
    ->html('<i class="icon-thumbs-down icon-white"></i> Unlike'); // exchange the data 
    } elseif ($data['perform'] === 'unlike'){ 
    $r 
    ->this() 
    ->removeClass('unlike') 
    ->addClass('like') 
    ->phery('set_args', array('id' => $data['id'], 'perform' => 'like')) 
    ->html('<i class="icon-thumbs-up icon-white"></i> Like'); // exchange the data 
    } 
    return $r; 
} 

Phery::instance()->set(array(
    'action' => 'action' 
))->process();