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

这是working example。

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

有用的参考资料

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

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

4 个答案: