Javascript 使用span原始数据在悬停时加载图像

因此，当我尝试更新某些样式时，我遇到了以下问题：我无法再找到我的

并将其替换为

我原来的工作很好（只包含1个

元素）：

$（文档）.ready（函数（$）{
$（'.trigger'）.mouseover（函数（）{
//找到我们的跨度
var elem=$（this.sibbines（'span'）；
//获取我们的img url
var src=elem.attr（'data-original'）；
//使用原始数据中的值将span更改为img
元素替换为（“”）；
});
$（'.trigger'）.mouseout（函数（）{
//找到我们的跨度
var elem=$（this.sibbines（'img'）；
//获取我们的img url
var src=elem.attr（'src'）；
//使用原始数据中的值将span更改为img
元素替换为（“”）；
});
});

但是将HTML更改为包含2个span元素的内容会导致上述操作失败（因为它选择了第一个

，而不是第二个）

我的信息

我的个人描述

可以找到一个例子

我只需要知道如何轻松地选择第二个span元素，从而获得原始数据的值

编辑

---

我发现通过复制粘贴，我的一个

没有被复制（我在阅读了一个答案后注意到）。这个

应该在

标记之后，因为整个表都是工具提示（上面编辑的）。也许提供css是个好主意，这样您就可以找到更新的脚本（结合@Muhammad answer）

这是因为您在同级中找到了带有

原始数据的span，而在同级中您添加了一个新的
span。tooltiptext
不是您以前用于检测图像源的span，您已将其移动到
表中

所以你必须改变主意

var elem = $(this).siblings('span');

到

检索图像并将其隐藏也是如此

改变

var elem = $(this).siblings('img');

到

除了上面的实际问题之外，您还有无效的标记，如unclosed
span.tooltiptext

<span class="tooltiptext">

你可以在这里看到一个工作演示


$（文档）.ready（函数（$）{
$（'.trigger'）。在（'mouseover'，function（）上{
//找到我们的跨度
var elem=$（this）.sibbines（'table'）.find（'span[data original]'）；
//获取我们的img url
var src=elem.attr（'data-original'）；
//使用原始数据中的值将span更改为img
元素替换为（“”）；
});
$（'.trigger'）。在（'mouseout'，function（）上{
//找到我们的跨度
var elem=$（this）.sibbines（'table'）.find（'img'）；
//获取我们的img url
var src=elem.attr（'src'）；
//使用原始数据中的值将span更改为img
元素替换为（“”）；
});
});

我的名字

我的个人描述
jQuery sibbins方法选择前面提到的元素同级
您的第二个没有工作，因为类
没有具有
数据原始属性的“span”同级。触发器
只有同级

<span class="tooltiptext">



及



因此，如果要选择具有
数据原始属性的范围，则必须替换该属性
var-elem=$（this.sibbines（'span'）
通过
var-elem=$（this.sibbines（'table span[data original]）
添加了一个答案，看看是否正确helps@MuhammadOmerAslam请参见上面的编辑。更新答案请参见编辑部分。非常感谢！我要试着和兄弟姐妹们多玩玩一玩来掌握窍门。你是wlecome@Y.T
var elem = $(this).siblings('img');

var elem =  $(this).siblings('table').find('img');

<span class="tooltiptext">

<span data-original="http://via.placeholder.com/140x100" /></span>

<span class="tooltiptext">

<table></table>