jQuery如何在单击时更改img的src路径？

Question

基本上我想要做的是每次点击"img-container" div外的图像时，更改"img-container" div中的src路径。我已经做到了这一步，现在不知道如何完成这段代码。

提前感谢。

<div class="img-container">
  <img id="changeMe" src="">
</div>

<img src="images/preview-1.jpg">
<img src="images/preview-2.jpg">
<img src="images/preview-2.jpg">

$('img').click(function(event) {
   alert($(this).attr('src'));
});

- Darko

Answer 1

给它们一个类

<div class="img-container">
  <img id="changeMe" src="">
</div>

<img class="preview" src="images/preview-1.jpg">
<img class="preview" src="images/preview-2.jpg">
<img class="preview" src="images/preview-2.jpg">

然后执行。

$('.preview').on('click',  function() {
    $('#changeMe').prop('src', this.src);
});

- adeneo

---

非常好，正是我所需要的。 - Darko

Answer 2

无需更改标记，只需按照以下方式更改脚本。

$('img:not(div img)').click(function(event) {
  $(".img-container img").attr('src',$(this).attr('src'));
});

- Hossein Salmanian

---

它正在更改其src路径，但不是宽度/高度。而这非常重要...这是我遇到的唯一问题。 - Darko

我猜显示所有图像的图像容器具有一些宽度和高度样式，如果是这样，那么您必须在脚本中显式设置它们。 - Hossein Salmanian

Answer 3

Adneneos的答案是最高效的。

然而，如果由于某种原因无法为图像添加类，则此方法将非常适用。这使用了.each()方法...

$(document).ready(function() {
 $("img[id!='changeMe']").each(function() {
  $(this).click(function() {
   $("#changeMe").attr('src', this.src);
  });
 });
});

在这里试一试

编辑：你需要定义一个更具体的类型，因为这种方法会检查页面上的每个图像。这个答案是基于提供的代码。然而，adeneos的答案可能更容易。

- Matt Maclennan

---

我同意adneneos的答案是最有效的。 - Darko