jquery顯示/隱藏。一個類的多個實例

我已經設法整理出一小塊Jquery來顯示和隱藏基於某人將光標懸停在其父div上的div。我想使用相同的類在頁面上有多個這樣的實例。代碼如下：jquery顯示/隱藏。一個類的多個實例

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.focus_hidden').hide(); 
    $('.focus_col').hover(function() { 
    $('.focus_hidden').slideToggle(); 
    return false; 
    }) 
}) 
</script>

來源

2011-09-08 Sean

您可以發佈HTML（或相關部分）以及您引用的多個實例的示例嗎？ –

請向我們提供一些關於功能的更多詳細信息，併發布您的HTML，我們可以看到您的代碼的層次結構。 – avall

請將您的努力發佈到http://jsfiddle.net/上，這會讓人們更容易地幫助解決問題。謝謝。 – marto

代碼讀取這樣的一部分...

$('.focus_col').hover(function() { 
    $('.focus_hidden').slideToggle(); 
    return false; 
})

正在申請.slideToggle每當任何focus_col元素懸停所有focus_hidden元素。如果你想申請的行爲已徘徊，你需要使用$(this)如$(this).slideToggle()

但你的問題不夠明確具體的元素...

來源

2011-09-08 11:30:01

我明白，每個focus_col有focus_hidden。
一種方法是把兩個元素在同一父元素：

<div class="focus"> 
    <div class="focus_col">COL1</div> 
    <div class="focus_hidden">HIDDEN1</div> 
</div> 
<div class="focus"> 
    <div class="focus_col">COL2</div> 
    <div class="focus_hidden">HIDDEN2</div> 
</div> 

$('.focus_col').hover(function() { 
    $(this).closest('.focus').find('.focus_hidden').slideToggle(); 
    return false; 
})

看到我的jsfiddle例如：http://jsfiddle.net/bouillard/VPG5S/

但正確的方法將取決於您的HTML機構。
的其他方法可以使用的數據元素相關聯：http://jsfiddle.net/bouillard/kCbaT/

來源

2011-09-08 11:31:11

這將幫助，如果你提供相關的HTML，但基本上就是你的問題是，你是在這一點上使用您的懸停功能的其他一般選擇的時候，確實你應該瞄準相對於被徘徊的物品的DOM。

例如：

<div class="parent"> 
    <div class="focus_col"> 
     Roll over me 
    </div> 
    <div class="focus_hidden"> 
     Hidden stuff! 
     </div> 
    </div> 

    <div class="parent"> 
    <div class="focus_col"> 
     Or roll over me too 
    </div> 
    <div class="focus_hidden"> 
     Some more hidden stuff! 
    </div> 
    </div>

然後改變了jQuery略微所以在懸停功能，它選擇基於當前項目focus_hidden權正在上空盤旋：

$('.focus').hover(function() { 
    $('.focus_hidden', $(this).parent()).slideToggle(); 
    return false; 
})

我對效率的知識不同的選擇器並不是那麼好，所以也許有人可以添加一個評論來說明上述是否可以改進。這取決於你想要在你的設計中有多靈活;例如，如果你知道focus_hidden div將總是跟隨focus_col，你可以用next（）直接跳到它。

此外，我會刪除.hide（）調用，只是改變CSS，以便默認情況下隱藏focus_hidden，從而節省一些客戶端處理。

來源

2011-09-08 11:32:36 Kasaku

jquery顯示/隱藏。一個類的多個實例

回答

相關問題