1

私の問題を表示するために、 このフィドルを作成しました。

ユーザーが評価をクリックした後に選択した値を設定していますが、ユーザーが再びホバーしたときに選択した値を削除したいと考えています。

それらが星の領域から離れた場合、元の値が選択されている場合はそれを選択したいと思います。

これにより、別の評価を選択できるようになりますが、マウス アウトすると以前に選択した評価が表示されます。

これがjqueryでの私の試みです：

$('.star').click(function(e) {

e.preventDefault();

var rating = this.firstChild.data;

    if (rating > 0) {

      $('.star.star_'+rating).addClass('hovered');

      // Trying to remove class if hovered but replace selected value when I mouse out

      /*
          $('.star_container').hover(function() {
                $('.star.star_'+rating).removeClass('hovered');
          });
      */

    }   
});

これを達成する方法はありますか？

4

2 に答える 2

6

http://jsfiddle.net/d4uPX/13/

私がしたことは、ユーザーが要素をクリックしたときに、評価を参照用のデータ値として添付することでした。

$('.star_container').data('rating', rating);

次に、ホバー機能を次に示します。

$('.star').hover(function() {
  $('.star').removeClass('hovered');
}, function(){
  $('.star.star_'+ $('.star_container').data('rating')).addClass('hovered');
});
于 2013-01-11T21:31:19.133 に答える
0

私の解決策は、閉鎖変数を使用して評価を保存するだけです...そして、それが設定されているかどうかを確認します。あなたのために働くはずです（データ要素を取得するために毎回コンテナを再選択する必要はありません）：

http://jsfiddle.net/d4uPX/17/

var rating;

$('.star').click(function(e) {          
   e.preventDefault();

    rating = this.firstChild.data;

    if (rating > 0) {         
        $('.star.star_'+rating).addClass('hovered');
    }
});

$('.rating_container').hover(
    function() {
        $('.star.star_'+rating).removeClass('hovered');
    },
    function() {
        if(rating){
            $('.star.star_'+rating).addClass('hovered');
        }
    }
);
于 2013-01-11T21:41:11.193 に答える