Question

我目前正在创建一个包含一些动态内容的网站，因此每当用户将鼠标悬停在标签上时，标签会展开以显示更多信息，然后在特定时间之后标签将再次折叠，除非用户将鼠标悬停在标签上再次，在这种情况下，超时将重置。我已经开发了代码来为1个标签执行此操作，但我现在要开发它来为多个标签执行此操作。

我遇到的问题是我全局定义了计时器的变量，因此它可以用于两个事件，但是当我有多个标签时，这不会起作用。

我无法思考如何为多个标签实现此目标，是否有人知道我该如何做到这一点？

到目前为止，这是我的代码......

    var timer;


    $('.label').mouseenter(function(){

        clearTimeout(timer);

        $('#' + this.id + ' div').slideDown('slow');

    });


    $('.label').mouseleave(function(){

        var temp = $('#' + this.id + ' div');

        timer = setTimeout(function() { 
            temp.stop().slideUp('slow');
        }, 2000);

    });

提前感谢您的帮助。

Answer 1

您可以维护一组计时器，例如

var timer = [];


$('.label').mouseenter(function(){

    clearTimeout(timer[$(this).index()]);

    $('#' + this.id + ' div').slideDown('slow');

});


$('.label').mouseleave(function(){

    var temp = $('#' + this.id + ' div');

    timer[$(this).index()] = setTimeout(function() { 
        temp.stop().slideUp('slow');
    }, 2000);

});

使用.hover之类的

，您也可以使用更清晰的语法来实现此目的

var timer = [];

$('.label').hover(function(){

    clearTimeout(timer[$(this).index()]);

    $('#' + this.id + ' div').slideDown('slow');

},function(){
    var temp = $('#' + this.id + ' div');

    timer[$(this).index()] = setTimeout(function() { 
        temp.stop().slideUp('slow');
    }, 2000);

});

Answer 2

为什么不使用hover：

$('.label').hover(function(){
  $('#' + this.id + ' div').slideDown('slow');
},
function(){
  $('#' + this.id + ' div').slideUp('slow');
})

这样，当标签悬停在上面时，会显示更多信息，当鼠标离开时，它们会再次隐藏。

hover的第一个参数是鼠标输入，第二个是鼠标离开。

更多信息：

http://api.jquery.com/hover/

Answer 3

您可以使用jQuery的timer方法，而不是使用全局变量.data()：

$('.label').hover(function(){
    clearTimeout($(this).data('hover_timeout'));
    $('#' + this.id + ' div').slideDown('slow');
},function(){
    var temp = $('#' + this.id + ' div');
    $(this).data('hover_timeout', setTimeout(function() { 
        temp.stop().slideUp('slow');
    }, 2000));
});

jQuery.data()文档

jquery使用多个setTimeouts

3 个答案: