jQuery |單擊一個div的嵌套圖像src與另一個div的嵌套圖像源交換點擊

Question

我正在尋找將點擊項目的圖像源傳遞到另一個的div。例如，在下面的標記：

<div class="row"> 
    <div id="header"> 
    <img src='placeholder' /> 
    </div> 
</div> 
<!--row--> 

<div class="thumb-wrapper row"> 
    <div class="thumb"> 
    <div class="thumb-content"> 
     <img src="http://static.srcdn.com/slir/w700-h350-q90-c700:350/wp-content/uploads/hulk-mark-ruffalo-marvel-phase-3-movies.jpg" /> 
    </div> 
    </div> 


    <div class="thumb"> 
    <div class="thumb-content"> 
     <img src="https://pmcvariety.files.wordpress.com/2015/02/spider-mannew.jpeg?w=670&h=377&crop=1" /> 
    </div> 
    </div> 
</div> 

我想用戶改變圖像源在標題中的任何圖像src爲被點擊的拇指的拇指內容DIV內。

我已經得到這一個拇指的基礎上工作，但我不知道如何使它許多讚許工作：

$('.thumb ').on('click', function(e) { 
    $("#header img").attr("src", "http://placekitten.com/1200/800"); 
}); 

這裏的另一個因素，該功能需要專門針對拇指內容 div內的圖像，因爲拇指 div中可能有其他圖像。

欣賞任何方向或幫助。

Answer 1

檢索根據元素的子img元素的src屬性被點擊：

$('.thumb').on('click', function(e) { 
    var src = $(this).find('.thumb-content img').attr('src'); 
    $("#header img").attr("src", src); 
}); 

你可以簡化您的代碼和事件偵聽器附加到img元素來代替：

$('.thumb img').on('click', function(e) { 
    $("#header img").attr("src", this.src); 
}); 

Answer 2

這樣的事情，使用兒童選擇器呢？

$('.thumb-content>img').click(function(e) { 
    console.log('thumb clicked'); 
    $("#header>img").attr("src", $(this).attr("src")); 
}); 

Answer 3

在這裏你去：

$("#header img").attr("src", $(this).find('img').attr("src")); 

Answer 4

嘗試：

$('.thumb img').on('click', function(){ 
    $('header img').remove(); 
    $(this).clone().appendTo('header'); 
});