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

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'); 
}); 

可以看出它是静态的，因为它是现在。我想这样的事情来获得id元素的数量李（前sidebarList_ ）：

$(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(); 
});​ 

这是working example。

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

有益的参考

• The .on() method
• The .toggle() method
• The .data() method

Answer 2

尝试使用此

$("#test li").mouseover(function() { 
    var myString = $(this).attr("id").replace("sidebarList_",""); 
    $("#imgDiv_" + myString).css('visibility','visible'); 
}); 

$("#test li").mouseout(function() { 
    var myString = $(this).attr("id").replace("sidebarList_",""); 
    $("#imgDiv_" + myString).css('visibility','hidden'); 
}); 

Answer 3

你应该学习如何使用$(this)或this。你使用它的方式并不是真的。当你想使用this会是这样

$('div').click(function(){ 
    $(this) //<--- refers to the div that was clicked 
}); 

您可以使用

$('div').hover(
    function(){ //<-- Mouse in 

    } 
);function(){ //<-- Mouse out 

}; 

Answer 4

使它既更好语义，键盘操作，以及对自己更容易使悬停项目链接：

<ul id="test"> 
<li id="sidebarList_1"><a href="#imgDiv_1">Image 1</a></li> 
<li id="sidebarList_2"><a href="#imgDiv_2">Image 2</a></li> 
<li id="sidebarList_3"><a href="#imgDiv_3">Image 3</a></li> 
<ul> 

和jQuery：

$('#test li a').bind('mouseenter focusin',function() { 
    $($(this).attr('href')).show(); 
}).bind('mouseleave focusout',function() { 
    $($(this).attr('href')).hide(); 
}); 

这意味着你需要使用字符串操作，并且如果用户在其浏览器中关闭了JS，相关项目仍然在语义上相关联。