コンバートラジオボタン格付け

にスターを付けるには、私はnintexフォームとそれがラジオボタンのDOM構造がコンバートラジオボタン格付け

<table class="controls rating"> 
<tr> 
<td> 
    <span> 
     <input type="radio" name="review-rating" id="1" value="1" /> 
     <label for="1">1</label> 
    </span> 
</td> 
<td> 
    <span> 
     <input type="radio" name="review-rating" value="2" id="2" /> 
     <label for="2">2</label> 
    </span> 
</td> 
<td> 
    <span> 
     <input type="radio" name="review-rating" value="3" id="3" /> 
     <label for="3">3</label> 
    </span> 
</td> 
<td> 
    <span> 
     <input type="radio" name="review-rating" value="4" id="4" /> 
     <label for="4">4</label> 
    </span> 
</td> 
<td> 
    <span> 
     <input type="radio" name="review-rating" value="5" id="5" /> 
     <label for="5">5</label> 
    </span> 

</td> 
</tr> 
</table>

以下のようである持っている方法を使用しています星評価

にフォームのラジオボタンを変換しようとしています

は、今私は私が期待しない何jsfiddleを見つけましたが、私はいくつかの微調整を行い、ラジオボタンがスターとして表示されましたが、その期待どおりに動作していない

DOM構造が異なっていた

Here is the fiddle

私は、上の星の評価が下の星の評価のように機能するようにします。

P.S：下の1は変更後に動作しない場合は、その[OK]をクリックします。私はちょうど私のDOM構造（フィドルのトップ1）のために星の評価を働かせたいと思う。

出典

2016-11-17 Vignesh Subramanian

レベル1の子ノード上で動作しますが、私は強くそれに対して助言するだろうとして、あなたがそれをやっている具体的な理由があります。また、あなたが提供したフィディルドは絶対にうまくいくようです –

あなたのフィドルが働いています、それで何が問題なのですか？ –

@RoryMcCrossanええ、私はフォーム（DOM構造）の方法を変更するオプションはありません。私はそれがDOMの構造で動作するようにCSS /スクリプトを追加することができます。トップスターの第2スターと第4スターをクリックしてみてください –

私はちょうど

$('.controls.rating') 
    .addClass('starRating') //in case js is turned off, it fals back to standard radio button 
    .on('mouseenter', 'label', function(){ 
      DisplayRating($(this)); // when we hover into a label, show the ratings 
     } 
    ) 
    .on('mouseleave', function() { 
     // when we leave the rating div, figure out which one is selected and show the correct rating level 
     var $this = $(this), 
      $selectedRating = $this.find('input:checked'); 
     if ($selectedRating.length == 1) { 
      DisplayRating($selectedRating); // a rating has been selected, show the stars 
     } else { 
      $this.find('label').removeClass('on'); // nothing clicked, remove the stars 
     }; 
    } 
); 

var DisplayRating = function($el){ 
    // for the passed in element, add the 'on' class to this and all prev labels 
    // and remove the 'on' class from all next labels. This stops the flicker of removing then adding back 
    $el.addClass('on'); 
    $el.parent('label').addClass('on'); 
    $el.closest('td').prevAll().find('label').addClass('on'); 
    $el.closest('td').nextAll().find('label').removeClass('on'); 
};

編集アンドゥを追加、これを試してください：あなたは、私はちょうど私がそれを編集したように、最近のバグに気付くと、バグを修正

JS Fiddle

出典

2016-11-17 09:43:23 Beginner