1

slideUp()使用している初期セレクターに含まれている場合、関数にコールバック関数を追加するにはどうすればよいchildren()ですか?

$('.homebuttonbutton').hover(function() {
        $(this).stop().children('.homebuttonaction').slideDown();
        $(this).children('.homebuttonlabel').addClass('whitebutton');
    }, function() {
        $(this).stop().children('.homebuttonaction').slideUp(300, function() {
             $(this).children('.homebuttonlabel').removeClass('whitebutton');
        });
        //$(this).children('.homebuttonlabel').removeClass('whitebutton');
    });

したがって、理想的には、ホバーすると子.homebuttonactionが下にスライドして.whitebuttonクラスが追加され、ホバーを外すと上に.homebuttonactionスライドして.whitebuttonクラスが削除されます。

アニメーションが終了した後にクラスを削除したいと思っていますが、最初のセレクターがコールバック関数に slideUp使用しているため、クラスを「選択」する方法がわかりません。children

複数の.homebuttonactionクラスが存在するため、単に使用することはできません

$('.homebuttonaction').removeClass('.whitebutton');

それはすべての人に当てはまるからですよね？コールバック関数$(this)は、最初に選択されたアイテムとして扱われますか、それとも で見つかった現在選択されているアイテムとして扱われchildren()ますか?

助けてくれてありがとう、SO。

編集 ここに私のフィドルがあります - http://jsfiddle.net/kcxWc/ - ご覧のとおり、スライドアップ効果が終わった後、クラスは削除されません。セレクターの問題だと思います...

4

2 に答える 2

1

「this」キーワードに常に依存する必要はありません。これらの関数にはイベント オブジェクトが渡され、event.target プロパティによって「選択されたアイテム」を見つけることができます。例えば。

$('.homebuttonbutton').hover(function(event) {
    var onlyTheButtonThatWasClicked = event.target;
});
于 2013-02-25T20:40:40.723 に答える
0

this.homebuttonbuttonmouseenter / mouseleaveコールバック内のオブジェクトと、slideUp コールバック内のオブジェクトを参照し.homebuttonlabelます。

コールバック内でを参照する.homebuttonbuttonには、dom ツリーを検索するか、クロージャーでそれへの参照をキャプチャします。

dom ツリーをたどる:

$(this).stop().children('.homebuttonaction').slideUp(300, function() {
    $(this).closest('.homebuttonbutton').children('.homebuttonlabel').removeClass('whitebutton');
});

クロージャでのキャプチャ:

var homeButton = $(this);
$(this).stop().children('.homebuttonaction').slideUp(300, function() {
    homeButton.children('.homebuttonlabel').removeClass('whitebutton');
});
于 2013-02-25T20:47:14.503 に答える