1

Like / Unlikeシステムを構築していますが、クラスのようなボタンがあります。クリックすると、データがデータベースに挿入され、クラスがlikeに変更されます。

そして、実際のlikeを削除するが機能しない別の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呼び出しを行う前に、それをテストするための例として、これとは異なるアラートを作成しました。

だからクラウド誰かが私にヒントをくれますか？

4

3 に答える 3

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呼び出しを使用することもできます。これにより、コードが少なくなります。

于 2012-11-20T09:27:15.320 に答える
1

$(selector).toggleClass();次のように使用することもできます。

jQuery：

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

これがjsbinです

于 2012-11-20T09:45:12.827 に答える
0

http://phery-php-ajax.netのようなライブラリを使用して、コードをDRYに保ち、クリックイベントを再バインドせずにコードを再利用できます。これは、を介して追加されたすべてのボタンで機能します。 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();
于 2012-11-21T03:28:09.780 に答える