【问题标题】:Why isn't .is(":hover") working?为什么 .is(":hover") 不工作?
【发布时间】:2012-09-21 11:01:27
【问题描述】:

我有这段代码可以在您一秒钟左右不移动鼠标后淡出页面上的某些内容:

idleTime = 0;
var idleInterval = setInterval(function() { 
    idleTime++;
    if (idleTime > 1) {
        var isHovered = $('.fade-outs').is(":hover");
        if(isHovered == false) {
            $('.fade-outs').stop().fadeOut();
        }
    }
}, 1000);
$(document).bind('mousemove mousedown', function(e) {
    idleTime = 0;
    $('.fade-outs').fadeIn();
});

但是,$('.fade-outs').is(":hover"); 部分出现以下错误:

错误:语法错误,无法识别的表达式:悬停 [http://localhost:5545/assets/js/jquery.min.js:3]

有人知道我为什么会收到这个错误吗?

【问题讨论】:

标签: javascript jquery hover


【解决方案1】:

尝试将其更改为:

idleTime = 0;
var idleInterval = setInterval(function() { 
idleTime++;
if (idleTime > 1) {
    var isHovered = $('.fade-outs').is(".hover");
    if(isHovered == false) {
        $('.fade-outs').stop().fadeOut();
    }
}
}, 1000);
$(document).bind('mousemove mousedown', function(e){
  idleTime = 0;
  $('.fade-outs').fadeIn();
});
$('.fade-outs').hover(funciton() { $(this).toggleClass('hover') });

【讨论】:

    【解决方案2】:

    我会尝试这样的事情:

    var idleTimer;
    
    function startTimer() {
        stopTimer();
    
        idleTimer = setInterval(function() {
            $('.fade-outs').stop().fadeOut();
        }, 1000);
    }
    
    function stopTimer() {
        idleTimer && clearInterval(idleTimer);
    }
    
    $(document).on('mousemove', startTimer);
    
    $('.fade-outs').on({
        mouseleave: startTimer,
        mouseenter: stopTimer,
        mousemove: function(e) {
            e.stopPropagation();
        }
    });​
    

    演示:http://jsfiddle.net/Blender/urzug/4/

    【讨论】:

    • 嗨,Blender,请您在 stopTimer 函数中为我解释这一行idleTimer && clearInterval(idleTimer);。这是我在 JS 中遗漏的简写吗?
    • 在 JS 中,&& 运算符短路,这意味着如果左侧是 false,则根本不会计算右侧(无论是结果值将是false)。如果idleTimer 没有值,则idleTimer 不真实,因此运算符短路并且不会调用clearInterval。如果定义了idleTimer,则调用clearIntervala && ba ? a : b 相同(如果您了解三元运算符)。
    • 我确实有,但我以前从未见过他们这样写。当您在条件下调用函数时考虑它是非常有意义的,因此不需要真/假变量分配......谢谢您的解释,这将对我有所帮助。
    • 感谢您的回答,我决定选择另一个,但这个也很好,所以我投了赞成票。 && 运算符在 JS 中的速记技巧 - 从来不知道!
    猜你喜欢
    • 2019-08-29
    • 2022-12-16
    • 2015-07-22
    • 1970-01-01
    • 2021-03-08
    • 1970-01-01
    • 2012-06-23
    • 2010-10-26
    • 2012-09-21
    相关资源
    最近更新 更多