0

我尝试完成一个元素列表,在这些元素上悬停显示不同的图像。

像这样的东西

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

但这不起作用。我怎样才能完成我想做的事情?

4

4 回答 4

5

我会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可见。

有用的参考资料

于 2012-07-04T07:22:40.163 回答
0

通过制作悬停项目链接,使其在语义上、键盘可访问性和对您自己更容易:

<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,则相关项目仍然在语义上链接。

于 2012-07-04T07:28:06.437 回答
0

您应该学习如何使用$(this)or this。你使用它的方式,它实际上什么都没有。当你想使用this会是这样的

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

您可以使用

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

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

};
于 2012-07-04T07:23:05.233 回答
0

尝试使用这个

$("#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'); 
});
于 2012-07-04T07:21:39.150 回答