0

リストのどこにカーソルを置いているかに基づいてリスト項目を強調表示する評価スクリプトがあります。クリックすると、ホバーイベントを無効にして、強調表示されたリスト項目が強調表示されたままになるようにします。次に、特定のアイテムの評価を保存する ajax 呼び出しを実行します。次に、ホバーイベントをオンに戻したいと思います。助言がありますか？これがフィドルです。 http://jsfiddle.net/defmetalhead/n76My/1/

   <ul class="beeRating">
      <li class="oneBee" id="1">1</li>
      <li class="twoBee" id="2">2</li>
      <li class="threeBee" id="3">3</li>
      <li class="fourBee" id="4">4</li>
      <li class="fiveBee" id="5">5</li>
   </ul>
4

2 に答える 2

0

これを試して：

var $ratings = $(".beeRating li");

function onMouseOver(obj){
    obj.addClass('stop');
    $("li").each(function(index,domEle) {
        $(domEle).css('opacity', '1');
        if( $(this).hasClass('stop') ) {
            return false;
        }
    });
}

function onMouseLeave(obj){    
    obj.removeClass('stop');
    $("li").each(function(index,domEle) {
        $(domEle).css('opacity', '.25');
    });
}

function onClick(obj){
    var rating = obj.attr('id');    
    console.log(rating);
    $("li").each(function(index,domEle) {
        $(this).removeClass('stop');
        $(this).off('mouseover mouseleave');
    })
}

function rebindEvents(){
    $ratings
        .off('click mouseover mouseleave')
        .on({
        mouseover: function() {
            onMouseOver($(this));
        },
        mouseleave: function() {
            onMouseLeave($(this));
        },
        click: function() {
            onClick($(this));
            //send ajax call here or show some delay and rebind all events again
            rebindEvents();
        }
   });
}

rebindEvents();

ここで働くフィドル：http://jsfiddle.net/n76My/3/

お役に立てば幸いです。

于 2013-08-21T18:06:27.670 に答える