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>元素的類重命名爲其他元素。