Question

我有一个按钮（是带有类投票的锚标记），应单击该按钮以通过ajax请求对文章进行投票。之后，我想更新刀片视图中的投票计数（它是laravel应用程序）。具有班级要点的div应该更新，但是我不知道如何在单击时将要点绑定到ajax调用？

我想像使用$ button那样将.point绑定到ajax调用，然后用类点更新div。

<a data-id="{{ $article->id }}" class="btn vote {{ Auth::check() && Auth::user()->votedFor($article) ? 'btn-success' : '' }}"></a>

主要代码：

<div data-id="{{ $article->id }}" class="points">{{ $article->votes->count() }}</div>

$(document).on('click','.vote',function(){
 var $counter = $(this).next();
 var $button = $(this);
 var id = $button.data('id');
 var token = $('meta[name="csrf-token"]').attr('content');
$.ajax({

  type:'POST',
  url:"{!! URL::to('article/vote/') !!}/" + id,
  dataType: 'JSON',
  data: {
      "_method": 'POST',
      "_token": token,
      "id": id,
  },
  success:function(data){
      $counter.html(data.count);
      var color = data.voted ? '#bbb' : '#38c172';
      $button.css('background-color', color);
      console.log('success');
      console.log(data);
  },
  error:function(xhr){
      if (xhr.status == 401) {
        window.location.href = "{!! URL::to('login') !!}";
      } else if (xhr.status == 403) {
        window.location.href = "{!! URL::to('email/verify') !!}";
      }
  },
});
});

Answer 1

因此，您希望更新.points而不是单击的a按钮。

首先，确保您的a和.points是同一div元素的子元素，并且类似：

<div>
    <a data-id="{{ $article->id }}" class="btn vote {{ Auth::check() && Auth::user()->votedFor($article) ? 'btn-success' : '' }}">
        button
    </a>
    <div data-id="{{ $article->id }}" class="points">
        {{ $article->votes->count() }}
    </div>
</div>
...
<div>
    <a data-id="{{ $article->id }}" class="btn vote {{ Auth::check() && Auth::user()->votedFor($article) ? 'btn-success' : '' }}">
        button
    </a>
    <div data-id="{{ $article->id }}" class="points">
        {{ $article->votes->count() }}
    </div>
</div>

然后在JavaScript中定义计数器元素，例如

var $counter = $(this).parent().find('points');

并更新您的success:方法以应用CSS类并放置数据计数：

  $counter.html(data.count);
  var color = data.voted ? '#bbb' : '#38c172';
  $counter.css('background-color', color);

让我知道是否有意义，您可以完成实施。

Ajax绑定单击到另一个元素

1 个答案: