2

今日は Jquery の頭痛の種です。jquery でホバー イベントとクリック イベントを組み合わせようとしていますが、ホバー関数の最新の編集でクリック イベントがキャンセルされました。remove クラスがクリック イベントをオーバーライドしています。

私が達成したいのは、星の上にマウスを置くと、すべての兄弟が強調表示され、基本的にマウスをたどり、星を選択することを決定したら、それをクリックできるようにすることです。そのすべての兄弟とクリックしたものはaddClass メソッドが適用されました

私がこれまでに持っているもの

/* Hover Function */
$(document).ready(function(){
 $('.ratings li').hover(function(){
  $(this).prevAll().andSelf().addClass('goldstar');
   }, function() {
    $(this).prevAll().andSelf().removeClass('goldstar');
  });
});

/* Click Function */
$(document).ready(function(){
 $('.ratings li').click(function(){
  $(this).prevAll().andSelf().addClass('goldstar');
 });
});

/* Click functions to add a value */
$(document).ready(function(){
 $('#firstStar').click(function(){
  $('#hiddenRating').val(1);
 });
});

 $(document).ready(function(){
  $('#secondStar').click(function(){
    $('#hiddenRating').val(2);
 });
 });

 $(document).ready(function(){
  $('#thirdStar').click(function(){
   $('#hiddenRating').val(3);
  });
 });

$(document).ready(function(){
 $('#fourthStar').click(function(){
  $('#hiddenRating').val(4);
 });
});

$(document).ready(function(){
 $('#fifthStar').click(function(){
  $('#hiddenRating').val(5);
 });
});

フォーム

   <%= form_for @rating do |f| %>
   <%= f.hidden_field :ratings, :id => "hiddenRating" %>
   <%= f.hidden_field :user_id, :value => current_user.id %>
   <%= f.hidden_field :recipe_id, :value => @recipe.id %>
   <div class="ratings">
<ul>
 <li id="firstStar"></li>
 <li id="secondStar"></li>
 <li id="thirdStar"></li>
 <li id="fourthStar"></li>
 <li id="fifthStar"></li>
</ul>
    </div>

これを行うためのより良い方法があるに違いないことはわかっています。繰り返しコードがたくさんありますが、学習中であり、これをリファクタリングする方法を知りたいと思っています。.val メソッドを 1 つに結合する方法はありますか?

ホバーとクリック機能に関しては、 on メソッドを使用してホバーとクリックを渡すことができると理解していますか? これを実装する方法がわからない

どんな助けでも感謝します、

編集

ジャスフィドル

ありがとう

4

5 に答える 5

3

2 つのグローバル変数を追加clickedしましchosed_index た。また、ホバーが到達した最後の要素まで選択したい場合は、追加することで可能です

chosed_index = $(this).index() + 1;  // in the hover listener

jQuery 更新コード 

$(document).ready(function(){
    var clicked = false; 
    var chosed_index = -1 ; 
    $('.ratings li').on('hover', function(){

           $(this).siblings().andSelf().removeClass('goldstar');         
           $(this).prevAll().andSelf().addClass('goldstar'); 

    }); 

    $('.ratings li').on('mouseleave', function(){
        $(this).siblings().andSelf().removeClass('goldstar');  


            $(".ratings li:nth-child("+chosed_index+")").prevAll().andSelf().addClass('goldstar');


    }); 



    $('.ratings li').click(function(){

        clicked = true; 
        chosed_index = $(this).index() + 1; 

        $(this).siblings().andSelf().removeClass('goldstar');
        $(this).prevAll().andSelf().addClass('goldstar');
    });
  });

フィドルの更新を確認する

フィドル

これが役立つことを願っています:)

于 2013-02-20T15:24:05.367 に答える
2

JavaScriptを単純化してみてください。

$(function () {
    $('#stars li').hover(function () {
        var li = $(this);
        li.prevAll().andSelf().addClass('goldstar');
        }, function () {
        var li = $(this);
        li.prevAll().andSelf().removeClass('goldstar');
    });

    $('#stars li').click(function () {
        var li = $(this);
        $('#rating').text(li.data('rating'));
    });
})();

このフィドルを参照してください：http：//jsfiddle.net/PVyXz/1/

于 2013-02-20T15:15:37.533 に答える
1

「ロックされた」クラスを親に追加して、選択が行われたかどうかを JS が認識できるようにします。次に、選択が行われていない場合にのみホバーアウトに対処します。

$(document).ready(function(){
  // hover function
  $('.ratings li').hover(function(){
     $(this).prevAll().andSelf().addClass('goldstar');
     $('.ratings').removeClass('locked');
   }, function() {
     if (!$('.ratings').hasClass('locked')) {
       $(this).prevAll().andSelf().removeClass('goldstar');
     }
  });
  //click function 
  $('.ratings li').click(function(){
    $(this).prevAll().andSelf().addClass('goldstar');
    $('.ratings').addClass('locked');
  });
});

フィドル: http://jsfiddle.net/q86b9/1/

于 2013-02-20T15:20:54.603 に答える
1

ホバーに別のクラスを使用します（金よりも色合いが薄いか、明るいクラスです）

li後続のクリックのすべてのクリックでゴールドスタークラスをクリアすることもできます

http://jsfiddle.net/pxfunc/vZDwg/14/

.ratings ul li.goldstarHover {
    color:yellow;
}

/* Hover Function */
$(document).ready(function () {
    $('.ratings li').hover(function () {
        $(this).prevAll().andSelf().addClass('goldstarHover');
    }, function () {
        $(this).prevAll().andSelf().removeClass('goldstarHover');
    });
});

/* Click Function */
$(document).ready(function () {
    $('.ratings li').click(function () {
        $('.ratings li').removeClass('goldstar');
        $(this).prevAll().andSelf().addClass('goldstar');
    });
});
于 2013-02-20T15:21:10.703 に答える