将列表中的多个不同元素悬停，显示单个图像

Question

我尝试完成您将鼠标悬停在不同图像上的元素列表。

像这样的东西

<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 元素的编号（ex 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'); 
});

？但这行不通。我怎样才能完成我想要做的事情？

Answer 1

我会data-*为您的li元素添加一个属性，其值对应于相关的div：

<ul id="test">
 <li id="sidebarList_1" data-img="imgDiv_1">Image 1</li>
 <li id="sidebarList_2" data-img="imgDiv_2">Image 2</li>
 <li id="sidebarList_3" data-img="imgDiv_3">Image 3</li>
<ul>

然后使用以下 jQuery：

$("#test").on("mouseover mouseout", "li", function () {
    $("#" + $(this).data("img")).toggle();
});?

这是一个工作示例。

这使用on带有选择器作为第二个参数的方法来利用事件委托（每个li元素只有一个事件处理程序，而不是一个）。它假定div元素默认是隐藏的，因此在鼠标悬停时，toggle调用将使悬停div可见。

有用的参考

• 该.on()方法
• 该.toggle()方法
• 该.data()方法