無法使用.next（）工作

我正在嘗試添加一個類，以便在懸停文本上顯示跨文本文件，但只針對該特定圖像而不是一次顯示所有圖像。無法使用.next（）工作

我可以把它添加到所有跨度一次，但當我試圖限制它只有跨度被徘徊什麼也沒有發生。問題似乎是當我添加.next（'span'） - 雖然我不知道爲什麼。

任何人都可以告訴我我在做什麼錯嗎？

$('.scroller-image').hover(function() { 

     $(this).next('span').addClass('hover'); 
     }, function() { 
     $(this).next('span').removeClass('hover'); 

    });

這裏的標記：

<div class="scroller-image"> 
    <span>image title</span> 
    <img src="#" alt="#" /> 
</div>

來源

2012-07-30 maikunari

next()選擇下一個兄弟 - 不是子元素。你想這是什麼 children()

$(this).children('span')// <-- this find direct children spans

或find()

$(this).find('span') //<-- this finds all descendent spans

來源

2012-07-30 16:12:58

真棒，謝謝！ – maikunari 2012-07-30 16:15:16

NP，:)高興地幫助 – 2012-07-30 16:24:35

.next()找到兄弟姐妹，沒有孩子。嘗試$(this).children('span')

來源

2012-07-30 16:13:21 jackwanders

您可以使用.toggleClass()和提供this作爲選擇器的上下文來縮短您的代碼。像這樣：

$('.scroller-image').hover(function(e) { 
    $('span', this).toggleClass('hover', e.type === "mouseenter"); 
});

來源

2012-07-30 16:13:46

我會做'.toggleClass（'hover'，e.type ==='mouseenter'）'爲了安全起見。 – 2012-07-30 16:17:00

@ŠimeVidas好點，更新了我的答案。 – 2012-07-30 16:18:39

您是否試圖將「懸停」類添加到正在懸停的div的孩子的跨度？我認爲.next()去兄弟姐妹，爲什麼不嘗試

.children('span')

來源

2012-07-30 16:14:30 AceCorban

你不需要JavaScript的。 CSS可以這樣做：

.scroller-image:hover span { 
    /* the styles from your .hover class */ 
}

現場演示：http://jsfiddle.net/VbZ2G/

來源

2012-07-30 16:18:15

無法使用.next（）工作

回答

相關問題