0

実際、私はこれを行う方法を知っています。しかし、ここでは何かが違います。インデックスページにはたくさんの投稿があります。<li>タグにあるすべての投稿。そして、投稿ごとに投票システムがあります。

<ul>

  <li class="class_li" data-id="this_posts_id">
   <a href="#" class="btn">Vote Up</a> <button class="btn dropdown-toggle" 
   data-toggle="dropdown">
     <span class="vote"> CURRENT VOTE </span>
      <span class="caret"></span> </button>
      </li>

      <li class="class_li" data-id="this_posts_id">
            <!-- another <li> for other posts with same tags and class names -->
      </li>
       <li class="class_li" data-id="this_posts_id">
            <!-- another <li> for other posts with same tags and class names -->
      </li>
</ul>

そして私のjqueryコード：

$('a.btn').click( function(){
        var post_id = $(this).closest('li').data('id');
        var vote = 1;
        var ajaxOpt = {
            type: 'post',
            url: '/content/vote/',
            data: {
                'vote': vote,
                'post_id': post_id,
                },
            success: function(data){
                $(this).find('.vote').text(data.vote_new); // this does not work!

                },
            error: function(){
                console.log('error :[');
                }
        };
        $.ajax(ajaxOpt);

    })

私は試しclosest() parent()てみfind()ました。すべて同じです。一度私はそれを機能させます。しかし、その時、すべての投稿の投票値が変更されました。<li>タグの境界線だけではありません。

ハマった。すべてが真実に見えます。しかし、何かが間違っています。

ありがとうございました。

4

1 に答える 1

1

問題は$(this)、successコールバックでの使用にあります。これは、コードが期待するボタンではありません。successそのため、コールバックの外で参照をキャプチャするコードを変更する必要があります。

したがって、以下は変更されたコードです。

  • ボタンのローカル変数を作成します ( $this)

  • と を使用sibling()しfind()て、正しい投票要素に到達します

    $('a.btn').click( function(){

    //This will be the button - maybe call it $button if that's clearer
    var $this = $(this);

    var post_id = $(this).closest('li').data('id');
    var vote = 1;
    var ajaxOpt = {
        type: 'post',
        url: '/content/vote/',
        data: {
            'vote': vote,
            'post_id': post_id,
            },
        success: function(data){

            //This now works! :)
            $this.siblings('button').find('.vote').text(data.vote_new); 

            },
        error: function(){
            console.log('error :[');
            }
    };
    $.ajax(ajaxOpt);

});

これは、シナリオを使用した概念を示すJSFiddleです。

于 2014-02-11T23:05:52.327 に答える