动态鼠标输入

Question

我添加了一些带有内部img标记的div。每个标签都有自己唯一的id="theImg"+i，其中"i"是数字。我想把鼠标移到特定的img上，并显示span的内容(它也有带数字的特定id)。这是到目前为止我的代码，但不起作用。

var j;  
document.onmouseover = function(r) {
console.log(r.target.id);
j = r.target.id;
}
$(document).on({
mouseover: function(e){
$("span").show();
},
mouseleave: function(e){
$("span").hide();
}
}, "img#"+j);

Answer 1

如果在每个img之后都有一个span，那么完全不使用JavaScript可能是个好主意？；-)

您可以在CSS中使用:hover伪类，使您的东西始终可靠地工作。

考虑以下示例：

img + span {
display: none;
}
img:hover + span {
display: block;
}
/*/ Optional styles /*/
div {
position: relative;
float: left;
}
div img + span {
position: absolute;
color: #fff;
background: #27ae60;
border: solid 1px #2ecc71;
border-radius: 50px;
z-index: 1;
bottom: 1em;
width: 80%;
left: 50%;
margin-left: -43%;
padding: 2% 3%;
text-align: center;
}

<div>
<img src="https://placehold.it/400x200">
<span>This is an image of a gray rectangle!</span>
</div>
<div>
<img src="https://placehold.it/200x200">
<span>This is an image of a gray square!</span>
</div>
<div>
<img src="https://placekitten.com/g/400/200">
<span>This is an image of a cute kitten inside a rectangle!</span>
</div>
<div>
<img src="https://placekitten.com/g/200/200">
<span>This is an image of even cuter kitten inside a square!</span>
</div>

Answer 2

因此，问题是您试图在动态选择器("img#"+j)上设置处理程序，但这将不起作用。首先，在页面加载时，当j未定义时，该等式只会被求值一次。

所以你想这样做：

1. 只为鼠标定位img标签。。。更好的是，为您的特殊图像提供相同的css类，这样您就可以仅将事件处理程序附加到这些图像上。这样会更有效率

2. 当一个图像被鼠标移到或移出时，获取它的id属性，从中提取数字，然后使用它为要显示的适当跨度构建一个选择器。

   var get_span_from_image=函数(图像){var image_id=image.attr("id")；var matches=image_id.match(/theImg(\d+)/)；if(matches)return$("span"+matches[1])；return$()；//一无所获，返回一个空的jQuery选择}；$("img").hoverver(函数()｛//鼠标悬停get_span_from_image($(this)).show()；}，函数()｛//鼠标退出get_span_from_image($(this)).hide()；})；

注意：有更好的方法将两个节点"链接"在一起，但这只是用当前的结构来回答您的问题

更新：将两个节点连接在一起的一些想法

因此，与其试图从id属性中提取一个数字，更好的方法是告诉图像或跨度中的一个它的兄弟。你可以这样输出你的html，例如：

<img id="theImg1" data-target="theSpan1" class="hoverable" src="..."/>
....
<span id="theSpan1">...</span>

当然，现在你的想法可以是任何东西——你不必使用数字值或任何东西。

然后你的悬停代码变得非常简单：

var get_span_from_image = function(image) {
var span_id = image.data("target");
return $("#" + span_id);
};
$("img").hover(
function() { // mouse over
get_span_from_image($(this)).show();
},
function() { // mouse out
get_span_from_image($(this)).hide();
}
);

希望这能有所帮助！