jQuery分配每个元素超时的事件处理程序

Question

对我有意思。我有一个视频播放器，其控件在悬停时显示。最初，我用CSS做了这个，但不得不改变策略到JavaScript，以便与浏览器全屏API（其中，顺便说一句，你总是在视频上徘徊）打好。

我的新方法是为视频的容器设置一个事件处理程序mousemove，该容器添加一个类并设置一个超时以将其删除，如果超时已设置，则清除它。这是完美的，但逻辑不会扩展到一个以上的玩家。

TLDR：如何扩展我的逻辑以扩展到多个视频容器？ time变量的范围需要包含在每个元素事件中，但也包含在处理程序之外，以便它可以从一个事件清除到下一个事件（在同一个元素上）。

感谢您的帮助 - 这些逻辑问题对我来说总是很困难。

这是jsFiddle example。当您将鼠标悬停在一个元素上时，您会注意到它运行良好，但当您展开到页面上其余元素时会出现问题。

HTML：

<div class="cont"> 

    <div class="controls">controls</div> 
</div> 

的JavaScript：

var time; 

$('body').on('mousemove', '.cont', function(){ 

    var thiis = $(this); 

    if (time){ 

     clearTimeout(time); 
    } 

    thiis.addClass('showControls'); 

    time = setTimeout(function(){ 

     thiis.removeClass('showControls'); 
    }, 2000); 
}); 

Answer 1

您可以存储使用jQuery的数据的方法的时间变量，它可以存储在您的每一个元素的数据。

$('body').on('mousemove', '.cont', function(){ 

    var thiis = $(this), 
     // get the time from the data method 
     time = thiis.data("timer-id"); 

    if (time){ 
    clearTimeout(time); 
    } 

    thiis.addClass('showControls'); 

    var new_time = setTimeout(function(){ 
    thiis.removeClass('showControls'); 
    }, 2000); 

    // save the new time 
    thiis.data("timer-id", new_time); 
});