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はマウス入力用で、2番目のパラメータはマウス離脱用です。

より詳しい情報：

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

于 2012-06-06T13:29:00.097 に答える
0

グローバル変数を使用する代わりに、次のようなtimerjQueryの.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 に答える