顯示和隱藏不同 <img> 同班

Question

我有這個用javascript創建的html代碼。

$(".timeline-points").prepend( "<div class='vd-cues''></div>" );

$(".vd-cues").css('left',p/d*100+"%"); //bullets position on the progress bar

$(".timeline-points").prepend("<img class='preview-img' src='./vids/out/"+f+"' height='80px'></img>");

$(".preview-img").css('left',p/d*100-7+"%");

我想要的是當鼠標懸停在特定的vd-cues時獲得preview-img 。 因此，當鼠標懸停在第一個vd-cues ，應show第一個圖像，而在第二個vd-cues上應show第二個圖像，依此類推...

我嘗試了幾種方法，但是無法使它起作用。 我認為這是因為我正在使用jQuery創建HTML，也因為我即將調用OverBullets函數。

http://jsfiddle.net/7R36G/1/

Answer 1

id在HTML文檔中是唯一的。

更好的方法是使用class並隱藏它們

<img class="preview" src="...">
<img class="preview" src="...">

jQuery的

$('img.preview').hide()

Answer 2

id在HTML文檔中是唯一的。
更好地使用名稱。 這樣就可以實現您所需要的。
您可以通過使用獲取所有元素

getElementsByName("name")

這將返回所有具有相同名稱的元素。 檢查其可見性（如果可見），將其更改為不可見狀態，並將隱藏的事物更改為可見狀態。
而已。 做完了

Answer 3

我不得不承認我有點沮喪，因為沒人能真正幫助我解決我的問題。 但是，我感謝大家對課程的支持和關注。

我已經通過父母和孩子的方法以及簡單的CSS行解決了我的問題。

但是，我不得不放棄您建議的類方法，因為我不知道如何為每個類指定左值，就像使用id時那樣。

因此，我所做的是將第二個prepend更改為vd-cues ，因此我創建了一個帶有父vd-cues的子preview-img 。 然后，當鼠標懸停在上面時，我使用了“ #parent：hover #child”來顯示正確的圖像，瞧瞧:)

http://jsfiddle.net/7R36G/3/