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。

elem jQuery集合包含每个跨度。所以...

解决方法是将<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>

当光标置于链接\图像上时显示图像（所有链接上显示相同的图像）

2 个答案: