Javascript Oneclick返回两次结果？

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。我试图使用unbind，但仍然给我两次结果。我也试图做出只有一个，仍然给我两倍的结果。

Answer 1

这是因为在同一个DOM树中有一个类rating有两个元素。

我建议将您最上层的<div>元素的类重命名为其他元素。