2

我目前正在创建一个包含一些动态内容的站点，这样每当用户将鼠标悬停在标签上时，标签就会展开以显示更多信息，然后在特定时间后标签将再次折叠，除非用户再次将鼠标悬停在标签上如果超时将重置。我已经开发了代码来为 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);

    });

提前感谢您的帮助。

4

3 回答 3

5

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

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

});

您还可以使用更清晰的语法来实现这一点.hoverlike

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

});
于 2012-06-06T13:27:51.633 回答
4

你为什么不使用hover：

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

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

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

更多信息：

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

于 2012-06-06T13:29:00.097 回答
0

timer您可以使用 jQuery 的方法而不是使用全局变量，.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()文档

于 2012-06-06T13:34:01.163 回答