Question

这是我正在打墙的设置。我有一长串的链接，我希望所有人都给同一个班级。

在页面右侧是一个图像，当我们想要在滚动这些链接时更改其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" />

Answer 1

使用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/" />

Answer 2

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

更改

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

到

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

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

Answer 3

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

JQuery：在翻转时使用链接名称交换图像src

3 个答案: