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

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>