展示&amp;隐藏具有相同类的不同<img/>

时间:2014-03-12 11:32:21

标签: javascript jquery html css show

我使用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+"%");

我想要的是当鼠标位于特定preview-img时获得vd-cues。因此,当鼠标位于第一个vd-cues上方时,第一个图像应为show,而在第二个vd-cues上,第二个图像应为show,依此类推。

我尝试了几种方法,但我无法使用它。我认为这是因为我用jQuery创建HTML,也因为我很快就调用了函数OverBullets

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

3 个答案:

答案 0 :(得分:0)

id在HTML文档中是唯一的。

更好的方法是使用class并隐藏那些

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

的jQuery

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

答案 1 :(得分:0)

id在HTML文档中是唯一的 更好用名字。这样你就可以实现你所需要的。
您可以使用

获取所有元素
getElementsByName("name")

这将返回具有相同名称的所有元素。 检查其可见性是否可见将其更改为不可见状态并将隐藏的内容更改为可见状态。
就是这样。完成。

答案 2 :(得分:0)