JQuery：在翻转时用链接名称交换图像 src [关闭]答案

【问题标题】：JQuery: Swap image src with link name on rollover [closed]JQuery：在翻转时用链接名称交换图像 src [关闭]
【发布时间】：2014-12-26 21:14:32
【问题描述】：

这是我碰壁的设置。我有一长串链接，我想都给同一个班级。

页面右侧是一张图片，当这些链接滚动时，我想更改它的 src。我认为最简单的方法是将新的 img src 存储到链接上的“名称”属性中。当链接翻转时，JQuery 获取链接“名称”并用它替换 img“src”。

我在这里打开了这段代码，但在我的一生中，我无法让它发挥作用。下面也是页面的粗略设置。

$('.nav_tradeshow').mouseover(function(){
    var a = $(this).attr('name');
    var b = $("#submenuImage1").attr('src');
    $("#submenuImage1").attr('src', b).attr('name', a);
});


<a href"#" class="nav_tradeshow" name="images/newimage.jpg">Link One</a>
<a href"#" class="nav_tradeshow" name="images/newimage.jpg">Link Two</a>
<a href"#" class="nav_tradeshow" name="images/newimage.jpg">Link Three</a>
<a href"#" class="nav_tradeshow" name="images/newimage.jpg">Link Four</a>
<a href"#" class="nav_tradeshow" name="images/newimage.jpg">Link Five</a>

<img id="submenuImage1" src="images/oldimage.jpg" />

【问题讨论】：

使用data属性，不要使用name属性存储随机的URL
您正在更改没有 src 属性的锚点的来源，因为 this 是当前悬停的锚点元素？
对不起，第二个（这个）不正确。它实际上设置为图像 ID。

标签： javascript jquery mouseover swap src

【解决方案1】：

您更改了错误的属性。换成

$("#submenuImage1").attr('src', b).attr('name', a);

到

  $("#submenuImage1").attr('src', a);

将属性从 name 更改为 data-name 也是一个好主意。所以它将遵循 W3C 标准

【讨论】：

【解决方案2】：

使用jQuery.data() 将原始源存储在图像元素本身内。使用jQuery.hover() 函数同时分配 mouseenter 和 mouseleave 事件。我建议您使用 HTML5 数据属性来存储 URL，而不是 name 属性：

$(function() {
  var $image = $("#submenuImage1");
  $image.data("old-src", $image.attr("src"));
  $(".nav_tradeshow").hover(function() {
    $image.attr("src", $(this).data("image-src"));
  }, function() {
    $image.attr("src", $image.data("old-src"));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<a href="#" class="nav_tradeshow" data-image-src="//lorempixel.com/200/200/food/1/">Link One</a>
<a href="#" class="nav_tradeshow" data-image-src="//lorempixel.com/200/200/food/2/">Link Two</a>
<a href="#" class="nav_tradeshow" data-image-src="//lorempixel.com/200/200/food/3/">Link Three</a>
<a href="#" class="nav_tradeshow" data-image-src="//lorempixel.com/200/200/food/4/">Link Four</a>
<a href="#" class="nav_tradeshow" data-image-src="//lorempixel.com/200/200/food/5/">Link Five</a>

<img id="submenuImage1" src="//lorempixel.com/200/200/sports/1/" />

【讨论】：

【解决方案3】：

    $("#submenuImage1").attr
({
'src': b,
'name': a
});

【讨论】：