1

星評価オプションに取り組んでいます。非表示の入力と 5 つの画像を含むスパンがあります。画像の 1 つにカーソルを合わせると、その画像と左側のすべての兄弟画像が強調表示されたバージョンの画像に設定され、右側のすべての兄弟が淡色表示されます。

HTML

<span>
 <input type="hidden" value="1" class="starCount">
 <img src="star-on.jpg" alt="Rating:1 Star" class="rating"><!--
 --><img src="star-off.jpg" alt="Rating:2 Stars" class="rating"><!--
 --><img src="star-off.jpg" alt="Rating:3 Stars" class="rating"><!--
 --><img src="star-off.jpg" alt="Rating:4 Stars" class="rating"><!--
 --><img src="star-off.jpg" alt="Rating:5 Stars" class="rating">
</span>

JQuery

click: (function(){
  // Set the hidden input value to which rating you clicked
  $(this).siblings(".starCount:eq(0)").val($(this).index());
}),
mouseover: (function(){
  // Highlight the star being hovered + all stars to the left
  $(this).attr("src","star-on.jpg");
  $(this).prevAll(".rating").attr("src","star-on.jpg");
  $(this).nextAll(".rating").attr("src","star-off.jpg");
}),
mouseout:(function(){
  // Reset highlighted stars to the value of the hidden input

  // Get the position of the hovered element
  var stars = parseInt($(this).siblings(".starCount:eq(0)").val());

  if($(this).index() != stars){
    // Highlight this element and everything to it's left
    $(this).siblings(".rating:lt("+(stars-1)+")").attr("src","star-on.jpg");

    // Dim everything to the right
    /* -- Note this line: It works, but is where my question derives from -- */
    $(this).siblings(".rating:eq("+(stars-1)+")").nextAll().attr("src","star-off.jpg");
  }
})

私の問題は、「調光」部分をどのように達成しなければならなかったかです。これは [この要素] + 以前の兄弟に対して機能します:

$(this).siblings(".rating:lt("+(stars-1)+")").attr("src","star-on.jpg");

これが次のすべてに対して適切に機能しないのはなぜですか:

$(this).siblings(".rating:gt("+(stars-1)+")").attr("src","star-off.jpg");

GT セレクターの使用時に何が機能しないかを説明していないことに気付きました。これが私の問題を再現する方法です。http://jsfiddle.net/SNmcB/1/を参照してください。

  • 3 番目の星をクリックします。
  • 星 1 の上にマウスを置いて元に戻します。選択された 3 つにリセットされます。
  • 最初の星をクリックします。
  • 星 4 または 5 の上にマウスを移動し、元に戻します。ホバーした星はハイライトされたままです。
  • GT の代わりに nextAll() メソッドを使用すると、この動作は発生しません。
4

1 に答える 1

1

最初の星の兄弟: 2 3 4 5

これを選択できる gt() セレクターはありません。

2 番目の星の兄弟は次のとおりです。 1 3 4 5 gt パラメータは 0 である必要があります。

スター #3

兄弟: 1 2 4 5

必要なインデックス: 1

スター #4

兄弟: 1 2 3 5

必要なインデックス: 2

スター #5

兄弟: 1 2 3 4

必要なインデックス: 3

したがって、次のように動作するはずです。

if (stars === 1) {
    $(this).nextAll().attr("src","star-off.jpg");
} else {
    $(this).siblings(".rating:gt("+(stars - 2)+")").attr("src","star-off.jpg");
}
于 2012-04-13T13:36:16.443 に答える