2013-02-25 69 views
1

如果我使用的初始選擇器包含children(),如何將回調函數添加到slideUp()函數?當初始選擇器包含子時,Jquery slideUp回調函數

$('.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()

感謝您的幫助,所以。

編輯 這裏是我的小提琴 - http://jsfiddle.net/kcxWc/ - 你可以看到,類不會被刪除,因爲它應該是在後效果效果基本show結束。我相信這是一個選擇問題...

+0

你不應該使用'$(本)''裏面,而不是callback',你可以在外面緩存像' var $ this = $(this)'然後使用'$ this'而不是'$(this)'。類似於這個的答案是[這裏](http://stackoverflow.com/questions/15058159/jquery-dropdown-on-click/15058628#15058628)。 – 2013-02-25 20:39:40

+0

代碼有問題嗎?什麼不像你期望的那樣發生? – Andre 2013-02-25 20:42:32

+0

@刪除類的回調函數不起作用。我相信選擇器是不正確的。 – RCNeil 2013-02-25 20:45:09

回答

0

this將指在的mouseenter /鼠標離開calbacks一個.homebuttonbutton對象,並在效果基本show回調.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'); 
}); 
+0

請看我的編輯。你的解釋是豐富和讚賞的,但我似乎無法讓它與兒童或兄弟姐妹,或最接近的工作。 – RCNeil 2013-02-25 20:55:54

+0

感嘆...沒關係。它工作完美。非常婉拒! - http://jsfiddle.net/kcxWc/1/ – RCNeil 2013-02-25 21:00:04

+0

這可以用「最接近」的例子來說明:http://jsfiddle.net/kcxWc/2/ – Andre 2013-02-25 21:01:23

1

你不必總是依賴「this」關鍵字。這些函數被傳遞給事件對象,並且你可以通過event.target屬性找到「item selected」。例如。

$('.homebuttonbutton').hover(function(event) { 
    var onlyTheButtonThatWasClicked = event.target; 
});