Через JQuery получить изображение щелкнул SRC и поместить в другое изображение ЦСИ

Question

мне нужно получить исходный Src URL из изображения щелкнул, как HTML ниже:

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

По какой-то причине, даже если кнопка Tidy предоставляется, люди ленивы, чтобы привести в порядок свои коды.

Learn 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">