1

ここで見つけた「コントロール」の評価の例がありますhttp://jsfiddle.net/RpfLa/400/正常に動作しますが、クリックしたときに星を強調表示したままにする機能はありません。

class="rated"それを機能させるには、タグに追加する必要sがありますが、それでも少し複雑です。

 <!-- a rating with 1 star -->
    <span class='star-rating'>
      <s class='rated'>
       <s>
        <s>
         <s>
          <s>
          </s>
         </s>
        </s>
       </s>
      </s>
     </span>

そのための効率的なアルゴリズムが何であるか理解できません。

だから私が評価が何であるかを知っているとき

var numStars = $(e.target).parentsUntil("span").length+1;

s関連するものを見つけて、それを作成する前にすべてのものを作成するにはどうすればよいclass="rated"ですか？

4

3 に答える 3

2

jsFiddleデモ

$(function() {
    $("div.star-rating > s, div.star-rating-rtl > s").on("click", function(e) {
        $(e.target).parentsUntil("div").andSelf()
        .addClass('rated').end().end()
        .find('.rated').removeClass('rated');
    });
});

関連リンク：andSelf、、endaddClass

これらのほとんどは直感的に名前が付けられています。andSelfのようなフィルターを使用した後、一致したセットに現在の要素を追加しますparentsUntil。endそのフィルタリングをキャンセルします。

于 2013-03-15T13:40:47.030 に答える
1

一番上の要素を選択して、すべての星をループダウンできますか？何かのようなもの：

starSpan = $(".star-rating"); //or whatever selector you want to use for the span
currentStar = starSpan
for (i = 0; i < 5; i++) {
    currentStar = currentStar.children('s :first')
    if (i <= numStars) {currentStar.attr('class','rated')}
    else {currentStar.attr('class','')}
}

そうすれば、星の数を減らすことにも対処できます。

于 2013-03-15T13:40:06.650 に答える
0 
$(e.target).parent('div').find('.rated').removeClass('rated');
$(e.target).addClass('rated');
$(e.target).parentsUntil("div").addClass('rated');

http://jsfiddle.net/KczMC/

于 2013-03-15T13:39:28.893 に答える