rating star javascriptエラーを追加

Question

評価システムを実装しようとしています。

ユーザーは星のいずれかをクリックすると、私はその前に星にクラスを追加しようと星をクリックした：私が試した何

。

しかし、それは、この近代的なブラウザでは動作しますtd

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <thead> 
     <tr> 
      <th>&nbsp;</th> 
      <th>Rating </th> 

     </tr> 
     </thead> 
     <tbody> 

     <tr> 
      <td class="hd">usertext1</td> 
      <td>&nbsp;</td> 

      <td> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 

      </td> 
     </tr> 

     <tr> 
      <td class="hd">usertext</td> 
      <td>&nbsp;</td> 

      <td> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 

      </td> 
     </tr> 

     <tr> 
      <td class="hd">feedback text</td> 
      <td>&nbsp;</td> 

      <td> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 
       <i class="fa fa-star rating" aria-hidden="true"></i> 

      </td> 
     </tr> 

     </tbody> 
    </table> 


    <style> 
    .ratingstar{ 
     color:#FFD700 
    } 
    </style> 
    <script type="text/javascript"> 
    $('.rating').on('click', function(){ 
     var sel = $(this); 
     var td = sel.parents('td').find('.rating'); 
     td.each(function(item){ 
      if($(this)==sel){ 
      console.log(item);//I tried break here but It throws error 

      } 
      $(this).addClass('ratingstar'); 
     }) 
    }); 
    </script> 

Answer 1

これは実際にはチェーンと本当に簡単です：

$('.rating').on('click', function(){ 
    $(this)      // Our starting point, we're going left/right of this one 
     .addClass('starred') // Of course, activate the one selected 
     .nextAll()    // Select the "unstarred" 
     .removeClass('starred') // Deactivate greater ratings not selected 
     .end()     // This cancels the .nextAll() sub-selector, back to this 
     .prevAll()    // Get the lower stars 
     .addClass('starred') // Activate them 
    ; 
}); 

https://jsfiddle.net/9364fusb/2

Answer 2

内のすべての星にクラスを追加します。

$('.rating').on('click', function(){ 
    $(this).addClass('ratingstar'); 

    var prev = this.previousElementSibling; 

    while (prev) { 
     $(prev).addClass('ratingstar'); 
     prev = prev.previousElementSibling; 
    } 
}); 

Answer 3

実際の問題を説明するために、jQueryは配列のようなオブジェクトを返します。 $(this) == selは、同じ方法で常にfalseを評価します。[] == []は、各配列に固有の参照があるため、falseです。同値をテストするために、APIには$.is関数が含まれています。例えば（元のコードにこだわっ）：

$('.rating').on('click', function() { 
    var sel = $(this); 
    var td = sel.parents('td').find('.rating'); 
    td.removeClass('ratingstar').each(function(item) { 
     $(this).addClass('ratingstar'); 
     if ($(this).is(sel)) 
      return false; 
    }); 
}); 

» Fiddle