jQueryの評価システム

Question

私はまでそれは、項目の評価を示すだろう、これまでのところ、私はオンとオフの2つのクラスを持って、5つ星の合計があり、0から評価システムを作るために

をしようとしています人は、私がこれまでのところ唯一、誰でもすべての始まりをhilights、すべてを台無しに

$('#stars').mouseover(function() { 
     $(this).children().prevAll().andSelf().attr('class', 'on'); 
    $(this).nextAll().attr('class', 'on'); 
    }); 

を持って、それは前の星をHILIGHTと電流定格を隠すだろう、彼らの上に

<div id="stars"> 
<div class="on"></div> 
<div class="on"></div> 
<div class="on"></div> 
<div class="off"></div> 
<div class="off"></div> 
</div> 

JSを置きました助けることができる？あまりにも多くの時間働いて、それを働かせることができません..

ありがとう！

Answer 1

あなたがクリックする前にプレビューとしてこれを使用している場合は、あなたがこのようなホバー機能を使用することもできます。あなたはそれを見ることができる場所

$('#stars .star').hover(
    function() { 
     $(this).prevAll().andSelf().addClass('on'); 
     $(this).nextAll().removeClass('on'); 
    }, 
    function() { 
     $(this).parent().children().removeClass('on'); 
    } 
); 

このjsFiddleでHTMLに行きます作品：http://jsfiddle.net/jfriend00/aRTzQ/

それはオブジェクト上の他のクラスを持っているあなたに多くの柔軟性を提供し、より読みやすいように私もaddClass()とremoveClass()を使用して直接ではなく、属性を操作することをお勧めしたいです。

クリックをスティッキーにして、その設定を記憶するには、http://jsfiddle.net/jfriend00/QxADg/のようなものを使用できます。対応するCSS/HTMLはフィドルにあります。

$('#stars .star').hover(
    function() { 
     $(this).prevAll().andSelf().addClass('preview'); 
     $(this).nextAll().removeClass('preview'); 
    }, 
    function() { 
     $(this).parent().children().removeClass('preview'); 
    } 
); 

$('#stars .star').click(function() { 
    $(this).parent().children().removeClass('on'); 
    $(this).prevAll().andSelf().addClass('on'); 
}); 

$('#stars').hover(
    function() {$(this).addClass("inPreview");}, 
    function() {$(this).removeClass("inPreview");} 
); 

Answer 2

多くのプラグインがあります。例えば、1つのPPriceがリンクしています。何らかの理由であなたのニーズを満たしていない限り、それが良い方法だと私は他の人が同意します。

このコードを機能させたい場合や、学習のためにこれをやっている場合は、これはあなたがやろうとしていることでしょうか？

「星印」（ボックス）にカーソルを合わせると、色の変化を確認できます。

http://jsfiddle.net/pW3Sn/

$('#stars > div').mouseover(function() { 
     $(this).prevAll().andSelf().attr('class', 'on'); 
     $(this).nextAll().attr('class', 'off'); 
}); 

Answer 3

理由だけではなく、誰かのプラグインを使用していませんか？例えばhttp://www.fyneworks.com/jquery/star-rating/

Answer 4

実際には純粋なCSSを使用して実装できます。

HTMLコード：

<div id="stars"> 
    <div class="star"> 
     <div class="star"> 
      <div class="star"> 
       <div class="star"> 
        <div class="star"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

とCSS：

#stars { 
    height: 16px; /* height of stars block */ 
} 
#stars .star { 
    height: 16px; /* height of one star */ 
    padding-left: 16px; /* width of one star */ 
    background-image: url('http://url.to.your.star.image'); 
    float: left; 
} 
#stars .star:hover, 
#stars .star :hover { 
    background-position: 0px -16px; /* toggle image */ 
} 

作業例：http://jsfiddle.net/4CfzD/