我尝试完成一个元素列表,在这些元素上悬停显示不同的图像。
像这样的东西
<ul id="test">
<li id="sidebarList_1">Image 1</li>
<li id="sidebarList_2">Image 2</li>
<li id="sidebarList_3">Image 3</li>
<ul>
<div id="imgDiv_1">
<img src="http://www.freemacware.com/wp-content/images/smultron1.png" />
</div>
<div id="imgDiv_2">
<img src="http://www.freemacware.com/wp-content/images/smultron2.png" />
</div>
<div id="imgDiv_3">
<img src="http://www.freemacware.com/wp-content/images/smultron3.png" />
</div>
我的 jQuery 看起来像这样
$(this).mouseover(function() {
$("#imgDiv_1").css('visibility','visible');
}),
$(this).mouseout(function() {
$("#imgDiv_1").css('visibility','hidden');
});
正如所见,它现在是静态的。我尝试了这样的方法来获取 li 中 id 元素的数量(例如 sidebarList_ 1):
$(this).mouseover(function() {
var myString = $(this).val().split("_").pop();
$("#imgDiv_" + myString).css('visibility','visible');
}),
$(this).mouseout(function() {
var myString = $(this).val().split("_").pop();
$("#imgDiv_" + myString).css('visibility','hidden');
});
但这不起作用。我怎样才能完成我想做的事情?