jQuery - 在單個類中單獨選擇div

我對網頁設計有點新，但我覺得我主要知道自己在做什麼。我有幾個div，所有類.picture都與.description div內的文本分組在一起。我正在使用jQuery，因此當用戶將鼠標放在.picture div中的一張圖片上時，分配給該特定圖片的文本將淡入視圖。我知道我可以給每個div一個id並在jQuery中單獨訪問它們，但是我可以做一些操作，例如循環，這樣可以讓我只呼叫.mouseenter()和.mouseleave()一次，但仍然可以動畫所有div？我應該將每一對img和p分成另一個div嗎？jQuery - 在單個類中單獨選擇div

HTML：

<div class="picture" id="pic1"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/><!--Insert pictures of board members. Specify only height of width! --> 
<div class="picture" id="pic2"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/> 
<div class="picture" id="pic3"><img src="DSCI0003.jpg"/ height="400"></div><div class="description"><p>Gus</p></div><br/>

來源

2013-06-29 user2535507

你能描述你在找什麼？你是什麼意思，但仍然動畫所有的divs？順便說一句，你爲什麼要在img src之後放一個'/'？ –

你可以這樣做：

$("div.picture").mouseenter(function() { 
    $(this).next().fadeIn(); 
}).mouseleave(function() { 
    $(this).next().fadeOut(); 
});

這種結合鼠標進入和鼠標離開事件處理所有"div.picture"項目。在事件處理程序中，this引用鼠標移過的單個項目，然後.next()獲取它後面的元素 - 在您的情況下爲描述div。

演示：http://jsfiddle.net/j83Dd/

或者你可以只用CSS，沒有JavaScript的做到這一點，利用:hover pseudo-class連同adjacent sibling + selector：

div.description { 
    display : none; 
} 
div.picture:hover + div.description { 
    display : block; 
}

演示：http://jsfiddle.net/j83Dd/1/

哎呀，忘了淡入CSS解決方案：

div.description { 
    opacity : 0; 
    transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -webkit-transition: opacity 1s ease-in-out; 
} 
div.picture:hover + div.description { 
    opacity : 1; 
}

演示：http://jsfiddle.net/j83Dd/2/

以上所有取決於您現有的html結構。

「我應該將每對img和p分組到另一個div嗎？」

在我看來，你很可能組IMG和p到一個單一的DIV，而不是都在自己的div有以及增加周圍大把div容器。在我看來它是有道理的分組他們與一個div，因爲這表明他們屬於一起，但你不必...

來源

2013-06-29 23:30:27 nnnnnn

感謝您的快速回復。我從來沒有學過如何使用'.next（）'，所以這是完美的使用。 – user2535507

你可以寫一個通用的.mouseenter（）函數來處理這種情況是因爲HTML的結構。因爲相關.description div總是緊跟在.picture div之後，所以您可以通過$(this).next("div.description p");訪問相關說明。您可以使用.text（）方法讀取文本，或使用動畫使div.description可見。

.mouseleave（）函數可以類似，隱藏相關文本。或者，您可以使用:visible選擇器隱藏所有說明文字。有時候精確是很好的，有時很簡單。看看什麼與你的設計相符。

來源

2013-06-29 23:31:08

如果你不希望你的JavaScript依賴於HTML結構可以改變HTML到這一點：

<div class="picture" id="pic1"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic1"><p>Gus</p></div><br/><!--Insert pictures of board members. Specify only height of width! --> 
<div class="picture" id="pic2"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic2"><p>Gus</p></div><br/> 
<div class="picture" id="pic3"><img src="DSCI0003.jpg"/ height="400"></div><div class="description" data-pic-id="pic3"><p>Gus</p></div><br/>

我已經添加了新的屬性到.description的div：data-pic-id包含相同的值相應的.picture的id。

這將允許您準備的JavaScript將HTML結構分開：

$('.picture').mouseenter(function() { 
    var id = $(this).attr('id'); 
    $('[data-pic-id="'+id+'"]').fadeIn(); 
});

來源

2013-06-29 23:36:05

jQuery - 在單個類中單獨選擇div

回答

相關問題