当光标放在链接\image上时显示图像(所有链接上都显示相同的图像)

Question

我正试图通过鼠标悬停来显示图像，这是通过下面的javascript和class="trigger"的images\links实现的。下面的代码通过注释详细介绍了每个步骤的工作原理。问题是它只适用于第一个图像\链接，即：span data original="foobar.jpg"，随后的鼠标悬停都显示相同的图像。

$(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 + '" width="50%" height="50%" style="display:block;position:absolute;"/>');
});
$('.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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="/gotourl" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
<span data-original="https://via.placeholder.com/468x60?text=SPAN+1"></span>
<a href="/gotourl" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
<span data-original="https://via.placeholder.com/468x60?text=SPAN+2"></span>

Answer 1

您可以使用next()而不是siblings():来修复此问题

$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).next('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 + '" width="50%" height="50%" style="display:block;position:absolute;"/>');
});
$('.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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
<span data-original="https://via.placeholder.com/468x60?text=SPAN+1"></span>
<a href="#" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
<span data-original="https://via.placeholder.com/468x60?text=SPAN+2"></span>

Answer 2

.siblings()选择器将选择每一个同级跨度，即两者都是。

稍后，elem.replaceWith(...)将用该内容替换jQuery集合中的每个elem。

elemjQuery集合包含每个跨度。所以…

修复方法是将<a><span>组合封装在div中，因此：

$(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 + '" width="50%" height="50%" style="display:block;position:absolute;"/>');
});
$('.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>');
});
});

div {
display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href="/gotourl" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
<span data-original="https://via.placeholder.com/468x60?text=SPAN+1"></span>
</div>
<div>
<a href="/gotourl" class="trigger" target="_self"><img src="https://via.placeholder.com/100x100?text=Launcher" border="0"></a>
<span data-original="https://via.placeholder.com/468x60?text=SPAN+2"></span>
</div>