通过jQuery获取图像单击SRC并放入另一个图像SRC

Question

我需要从图像单击的图像中获取源src url，如下所示：

$(document).ready(function() {
  $(".thumbnail").click(function() {
    var var1 = $(this).find('.thumbnail img').attr('src');
    console.log(var1);
    $('#main_image').attr('src', var1).load(function() {});
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="thumbnail">
<img src="http://www.euroe-com.com/agv/graphics/agv_0041A2HY-002_b.jpg" width="200">
<img src="http://www.euroe-com.com/agv/graphics/agv_0041A2HY-006_b.jpg" width="200">
<span>
<br /><br /><br />
Put inside this 
<img id="main_image" src="http://www.euroe-com.com/agv/graphics/added-desc/agv_0041A2HY-02211_415x500.jpg" width="400">

我在您看到的时尝试了jQuery代码。

由于某种原因，它会抛出undefined。

这是在行动中http://jsfiddle.net/1oaxue9h

Answer 1

出于某种原因，即使提供了整理按钮，人们也懒于整理他们的代码。

学习jQuery。您需要从选择器中删除.thumbnail才能工作。COZ，您已经在这里，用this表示。由于this是.thumbnail，只有find("img")就足够了。

var var1 = $(this).attr('src');

您也有一个未锁定的<span>，需要更改为</span>。

$(document).ready(function() {
  $(".thumbnail img").click(function() {
    var var1 = $(this).attr('src');
    console.log(var1);
    $('#main_image').attr('src', var1).load(function() {});
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="thumbnail">
  <img src="http://www.euroe-com.com/agv/graphics/agv_0041A2HY-002_b.jpg" width="200">
  <img src="http://www.euroe-com.com/agv/graphics/agv_0041A2HY-006_b.jpg" width="200">
</span>
<br /><br /><br />
Put inside this 
<img id="main_image" src="http://www.euroe-com.com/agv/graphics/added-desc/agv_0041A2HY-02211_415x500.jpg" width="400">