JQuery:在翻转时将图像 src 与链接名称交换

JQuery: Swap image src with link name on rollover

本文关键字：链接 交换 src 图像 翻转 JQuery      更新时间：2023-09-26

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

在页面的右侧，是一个图像，当这些链接滚动时，我想更改其 src。我认为最简单的方法是将新的 img src 存储到链接上的"name"属性中。当链接滚动时，JQuery 会获取链接"name"并用它替换 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" />

您更改了错误的属性。只需从

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

自

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

adribute 从名称更改为数据名称也是一个好主意。所以它将遵循W3C标准

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

$(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/" />

    $("#submenuImage1").attr
({
'src': b,
'name': a
});
相关文章：