Question

我是jquery的新手，所以请原谅，好吧......一切！

我有一个'标题栏'，由大约10个小缩略图风格的图像组成。我希望能够点击这些图像，然后更改较大的侧边栏图像以显示更大的版本。

通过使用以下代码处理图片，我似乎可以解决这个问题：

<img src="header_images\small1.jpg" alt="alttext"  class="hdrimage" id="1" data-bigimage="big1.jpg" />
<img src="header_images\thumb2.jpg" alt="alttext"  class="hdrimage" id="2" data-bigimage="bigger2.jpg" />

等...

然后我在页面底部添加了一些jquery代码：

$(".hdrimage").bind('click', function() {
  $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage"));     
})

我不确定这是否是最好的方法，但似乎工作正常。

然后我认为淡出旧图像并淡入新图像会很好，所以添加了一个.fadeOut（“慢”）;对于click事件，但在测试时，它不会等到淡入淡出完成后再切换图像。感谢Google，我发现我需要在.fadeOut上使用回调函数来实现这一点，所以我尝试了类似的东西：

$(".hdrimage").bind('click', function() {
    $("#swappyimage").fadeOut('slow', function() {
      $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage"));
    })
})

但这不再适用。我很确定这是因为$（this）现在指的是#swappyimage而不是点击的.hdrimage。我无法弄清楚如何从点击的缩略图（.hdrimage）中引用我需要的属性来触发整个事情，所以会很感激一些帮助。

我希望我解释得那么好！

Answer 1

只需在fadeOut调用之前定义一个变量：

$(".hdrimage").bind('click', function() {
    var newSrc = "header_images/"+$(this).attr("data-bigimage");
    $("#swappyimage").fadeOut('slow', function() {
      $("#swappyimage").attr("src", newSrc);
    })
})

另外，我假设你刚离开这部分，但你永远不会淡化图像。

Answer 2

您可以使用http://api.jquery.com/event.target/并将事件对象通过函数传递到您需要的位置。

$(".hdrimage").bind('click', function(clickEvent) {
    $("#swappyimage").fadeOut('slow', function() {
      $("#swappyimage").attr("src", "header_images/"+$(clickEvent.target).attr("data-bigimage"));
    })
})

Answer 3

只需保存您的背景，

$(".hdrimage").bind('click', function() {
   var self = this;
   $("#swappyimage").fadeOut('slow', function() {
     $("#swappyimage").attr("src", "header_images/"+$(self).attr("data-bigimage"));
   })
})

从jquery中的父函数获取属性值

3 个答案: