javascript - 投票: AJAX update count

Question

我正在实现一个投票系统，当我想使用 AJAX 更新投票数时，我会刷新所有出版物的计数。但我不能只刷新一份出版物。查看我的 HTML:

@foreach($publications as $publication)
<li class="like-publication">

 <span>{{HTML::image(URL::to('img/widgets/likesocialmeet.png'),'Like')}}</span>

 <span class="votes">
   {{Publication::find($publication->id)->profilepublicationvotes->sum('vote')}}
 </span>

 {{ Form::open(array('url' => 'profilepublicationvotelike', 'class' => 'vote_ajax')) }}

 <input type="text" id="disabledTextInput" style="display:none" name="vote" value='1'>
 <input type="text" id="disabledTextInput" style="display:none" name="user_id" value="{{ Auth::user()->id }}">
 <input type="text" id="disabledTextInput" style="display:none" name="publication_id" value="{{ $publication->id }}">

 {{ Form::submit('vote', array('class' => 'button expand round')) }}

 {{ Form::close() }}

</li>
@endforeach

还有我的 javascript (AJAX):

$(document).ready(function() {
   var form = $('.vote_ajax');
    form.bind('submit',function () {
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            complete: function(data){
            },
            success: function (data) {
                $('.success_message').hide().html('');
                    $(form)[0].reset();
                    console.log("working");

                    $('.votes').text( data );
            },
            error: function(errors) {
                    alert('Something went to wrong.Please Try again later...');
            }               
        });
   return false;
   });
});

Answer 1

您正在选择全部 <span class="votes">通过使用

$('.votes').text( data );

您需要将其限制为表单的同级

var votes = $(this).prev('.votes');
votes.text( data );

所以你的 JavaScript 看起来像 -

$(document).ready(function() {
   var form = $('.vote_ajax');
    form.bind('submit',function () {
        //get the sibling vote
        var votes = $(this).prev('.votes');
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            complete: function(data){
            },
            success: function (data) {
                $('.success_message').hide().html('');
                    $(form)[0].reset();
                    console.log("working");

                    // update just the sibling vote
                    votes.text( data );
            },
            error: function(errors) {
                    alert('Something went to wrong.Please Try again later...');
            }               
        });
   return false;
   });
});

jsFiddle 示例 - http://jsfiddle.net/GhMfM/1/