因此，当我尝试更新某些样式时，我遇到了以下问题：我找不到并将<span data-original='image.jpg'></span>替换为<img src='image.jpg' />了。
我原来的工作正常（只包含1个<span>元素）：
<script>
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
</script>
<a href="profile.php" class="trigger" target="_self" id="al">Profile</a>
<span data-original="http://via.placeholder.com/140x100" /></span>
但是将HTML更改为具有2个span元素的内容会导致上述操作失败（因为它选择了第1个<span>而不是第2个）
<div class="tooltip"><a href="profile.php" class="trigger" target="_self" id="al">Profile</a>
<span class="tooltiptext"> <!-- tooltip with a table inside it -->
<table class="tg" style="table-layout: fixed;background: black;" >
<tr>
<th class="tg-su" colspan="2"><strong><i>My info</i></strong><hr></th>
</tr>
<tr>
<td class="tg-su"><span data-original="https://via.placeholder.com/140x100"></span></td>
<td class="tg-su">My personal description</td>
</tr>
</table>
</span> <!-- span from the tooltiptext class -->
</div>
可以找到一个例子HERE
我只需要知道如何轻松选择第二个span元素，从而获得data-original的值。
修改
我发现通过复制粘贴我的</span>之一没有被复制（我在阅读其中一个答案后注意到了它）。这个</span>应该在</table>标记之后，因为整个表格都是工具提示（在上面编辑过）。也许提供css是一个好主意，所以你可以找到更新的脚本（结合@Muhammad回答）HERE
答案 0 :(得分：2)
那是因为你在兄弟姐妹中找到data-original的跨度，而在兄弟姐妹中你添加了一个新的span.tooltiptext，这不是你以前用来检测图像源的范围，您已将其移至table。
所以你必须改变
var elem = $(this).siblings('span');
到
$(this).siblings('table').find('span[data-original]');
同样可以检索图像并将其隐藏
更改
var elem = $(this).siblings('img');
到
var elem = $(this).siblings('table').find('img');
除了上面的实际问题，您还有无效的标记，例如未关闭的span.tooltiptext
<span class="tooltiptext">
然后/
span内有</span>
<span data-original="http://via.placeholder.com/140x100" /></span>
你可以在这里看到一个有效的演示
$(document).ready(function($) {
$('.trigger').on('mouseover', function() {
// find our span
var elem = $(this).siblings('table').find('span[data-original]');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"/>');
});
$('.trigger').on('mouseout', function() {
// find our span
var elem = $(this).siblings('table').find('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="' + src + '"></span>');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="profile.php" class="trigger" target="_self" id="al">Profile</a>
<span class="tooltiptext"></span>
<table>
<tr>
<th colspan="2"><strong><i>My name</i></strong>
<hr>
</th>
</tr>
<tr>
<td><span data-original="https://via.placeholder.com/140x100"></span></td>
<td>My personal description</td>
</tr>
</table>
EDIT 根据您在问题中的更新，您应该更改行
var elem = $(this).siblings('table').find('span[data-original]');
到
var elem = $(this).siblings('span').find('span[data-original]');
在$('.trigger').on('mouseover', function() {
然后更改行
var elem = $(this).siblings('table').find('img');
到
var elem = $(this).siblings('span').find('img');
在$('.trigger').on('mouseout', function() {
请参阅更新的演示
$(document).ready(function($) {
$('.trigger').on('mouseover', function() {
// find our span
var elem = $(this).siblings('span').find('span[data-original]');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"/>');
});
$('.trigger').on('mouseout', function() {
// find our span
var elem = $(this).siblings('span').find('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="' + src + '"></span>');
});
});.tooltip {
position: relative;
display: block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
border-left: 6px solid #884fa1;
position: absolute;
z-index: 1;
top: 125%;
left: 0%;
opacity: 0;
transition: opacity 0.5s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 5%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-left-color: purple;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
padding: 5px 5px;
}
.tg th {
padding: 5px 5px;
}
.tg .tg-su {
border-color: inherit;
vertical-align: top;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="tooltip"><a href="profile.php" class="trigger" target="_self" id="al">Profile</a>
<span class="tooltiptext">
<table class="tg" style="table-layout: fixed;background: black;" >
<tr>
<th class="tg-su" colspan="2"><strong><i>My info</i></strong><hr></th>
</tr>
<tr>
<td class="tg-su"><span data-original="https://via.placeholder.com/140x100"></span></td>
<td class="tg-su">My personal description</td>
</tr>
</table>
</span>
</div>
</body>
</html>
答案 1 :(得分：0)
jQuery siblings方法选择所提到的元素兄弟here
并且你的第二个没有工作，因为.trigger类没有“跨越”的兄弟姐妹，data-original属性是唯一的兄弟姐妹
<span class="tooltiptext">
和
<table></table>
因此，如果要选择具有data-original属性的范围，则必须替换
var elem = $(this).siblings('span');
通过
var elem = $(this).siblings('table span[data-original]');