Javascript 动态鼠标器

我附加了几个div和内部img标记。每个标签都有自己唯一的id=“theImg”+i，其中“i”是数字。我想将鼠标移到特定的img上，并显示span的内容（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);

---

因此，问题是您试图在动态选择器（“img#”+j）上设置处理程序，但这不起作用。首先，当j未定义时，在页面加载时，该等式将只计算一次

因此，您希望这样做：

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

当图像被鼠标悬停或移出时，抓住它的id属性，从中提取数字，然后使用该数字为要显示的适当范围构建选择器

var get_span_from_image=函数（image）{ var image_id=image.attr（“id”）； var matches=image_id.match（/theImg（\d+/）； 如果（匹配项）返回$（“跨度”+匹配项[1]）； return$（）；//未找到任何内容，返回空的jQuery选择 }; $（“img”）。悬停( 函数（）{//将鼠标移到 从_图像（$（this））.show（）获取_span_； }, 函数（）{//鼠标悬停 从_图像（$（this））.hide（）获取_span_； } );

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

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

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

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

---

希望这有帮助

如果您在每次

img

之后都有一个span，那么最好不要使用JavaScript？；-）

您可以在CSS中使用

：hover

伪类，使您的东西始终可靠地工作

考虑以下示例：

img+span{
显示：无；
}
img：悬停+跨距{
显示：块；
}
/*/可选样式/*/
div{
位置：相对位置；
浮动：左；
}
div img+span{
位置：绝对位置；
颜色：#fff；
背景：#27ae60；
边框：实心1px#2ec71；
边界半径：50px；
z指数：1；
底部：1米；
宽度：80%；
左：50%；
左边缘：-43%；
填充物：2%3%；
文本对齐：居中；
}

这是一个灰色矩形的图像！
这是一个灰色正方形的图像！
这是一个长方形内的可爱小猫的图像！
这是一个正方形内更可爱的小猫的图像！

您的意思是，对于每个“theImg”+i，都有一个id为“theSpan”+i的对应span（两者的数字相同）？是的，正确，我在循环迭代中附加了它谢谢您的回答。如果您知道更好的方法，请不要犹豫，在这里分享：）这个解决方案似乎不适合我。我想因为我的div是在页面加载后附加的，这里是我的代码，请检查完整版本的application以获得更好的解决方案。谢谢好吧，我想我找到了解决办法。其实你的回答让我很满意。谢谢。我很高兴它能工作！CSS的特点是。。。当您向文档添加元素时，这并不重要，只要它们遵循已定义的CSS选择器即可

img+span

表示“文档中的任何

span

元素*正好*在任何

img

元素之后”。当然，您可以让它更具体，使用某些#id或.class定义父类。如果你还有什么问题，尽管问吧！

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