Jquery 在禁用单击后重新启用悬停事件？

我有一个分级脚本，它将根据您在列表中的悬停位置突出显示列表项。单击时，我禁用悬停事件，以确保高亮显示的列表项保持高亮显示。然后，我将运行一个ajax调用来保存特定项目的评级。然后，我希望重新启用悬停事件。有什么建议吗？这是小提琴。

1
2
3
4
5

试试这个：

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();

在这里演奏小提琴：

我希望有帮助。

试试这个，我已经编辑了你的代码，可以用了

var index=1;
$(".beeRating li").on({
    mouseover: function() {
        if(index==1)
        {
        $(this).addClass('stop');
        $("li").each(function(index,domEle) {
            $(domEle).css('opacity', '1');
            if( $(this).hasClass('stop') ) {
                return false;
            }
        })
        }
    },
    mouseleave: function() {
         if(index==1)
        {
        $(this).removeClass('stop');
        $("li").each(function(index,domEle) {
            $(domEle).css('opacity', '.25');
        })
        }
    },
    click: function() {
        var rating = $(this).attr('id');
        console.log(rating);
        index=0;

        $.ajax({    //call the function to do ajax request or do it here itself
           url: "<your url>"

           }).done(function() {   // important !! on done set the index as 1
              alert("success");
              index=1;  
            });
       }
});

var指数=1；
美元（“.beeRating li”）。在({
mouseover:function（）{
如果（索引==1）
{
$（this.addClass（'stop'）；
$（“li”）。每个功能（索引，圆顶）{
$（domEle.css（'opacity'，'1'）；
if（$（this）.hasClass（'stop'））{
返回false；
}
})
}
},
mouseleave:function（）{
如果（索引==1）
{
$（this.removeClass（'stop'）；
$（“li”）。每个功能（索引，圆顶）{
$（domEle.css（'opacity'，'.25'）；
})
}
},
单击：函数（）{
var评级=$（this.attr（'id'）；
控制台日志（额定值）；
指数=0；
$.ajax（{//调用函数来执行ajax请求，或者在这里自己执行
网址：“
}).done（函数（）{//important！！在完成时将索引设置为1
警惕（“成功”）；
指数=1；
});
}
});

---

希望这有帮助，谢谢你

是的，有很多不同的方法可以做到这一点，你可以在单击时将类添加到容器中，并在需要时删除该类。在悬停函数中，检查容器是否有该类，如果没有，请执行悬停MavericKosama92。感谢您的努力，但是列表在单击后不会保持高亮显示。答案非常接近。我会接受这个答案。但是，单击后，必须将鼠标悬停在所有突出显示的项目上，然后才能设置新的评级。不过我并不太担心。脚本将在加载时重置。

var index=1;
$(".beeRating li").on({
    mouseover: function() {
        if(index==1)
        {
        $(this).addClass('stop');
        $("li").each(function(index,domEle) {
            $(domEle).css('opacity', '1');
            if( $(this).hasClass('stop') ) {
                return false;
            }
        })
        }
    },
    mouseleave: function() {
         if(index==1)
        {
        $(this).removeClass('stop');
        $("li").each(function(index,domEle) {
            $(domEle).css('opacity', '.25');
        })
        }
    },
    click: function() {
        var rating = $(this).attr('id');
        console.log(rating);
        index=0;

        $.ajax({    //call the function to do ajax request or do it here itself
           url: "<your url>"

           }).done(function() {   // important !! on done set the index as 1
              alert("success");
              index=1;  
            });
       }
});