Javascript 一次 onclick 返回两次结果？

Question

这是我的代码

<div class="rating">
  @for ($i = 1; $i <= 5; $i++)
    @if ($i <= ceil($rating[0]->average))
      <i id="{{$i}}" style="cursor:pointer" class="fa fa-star rating"></i>
    @else 
      <i id="{{$i}}" style="cursor:pointer" class="fa fa-star-o rating"></i>
    @endif
  @endfor
</div>

我的Javascript

<script type="text/javascript">
 $('.rating').click(function() {
    var id = $(this).attr('id');
    $.ajax({
        url: "{{url('rating')}}",
        type: "POST",
        data: { id_artikel: "{{$artikel->artikel_id}}",  _token: '{{ csrf_token() }}', value:id},
        success: function(response){
          alert('Bintang berhasil anda berikan!'); 
      },
      error: function(){
          alert('Bintang gagal anda berikan!')
      }
  });
});

</script>

当我点击时，我得到了两次结果。第一个给出正确的“id”，其他给出 null。我尝试使用解除绑定(bind)，但仍然给我两次结果。我也尝试只做一个，但仍然给我两次结果。

Answer 1

那是因为同一 DOM 树中有两个元素，其类为 rating .

我建议重命名你最上面的类<div>元素到其他东西。