如何用一次點擊替換圖片src attr？ jQuery

Question

我有一個圖像上面四個較小的圖像。當用戶點擊其中一個較小的圖像時，較小的圖像會佔用較大的圖像。但仍然留在原來的位置。我想我接近解決它，但需要幫助。

HTML

 <div class="col-md-8 modal-images"> 
     <div class="row large-image"> 
     <div class="col-md-12"> 
      <img src="One.png"> 
      </div> 
      </div> 
      <br/> 
      <div class="row small-image"> 
       <div class="col-md-4"> 
        <img src="One.png"> 
       </div> 
       <div class="col-md-4"> 
        <img src="Two.jpg"> 
       </div> 
       <div class="col-md-4"> 
        <img src="Three.jpg"> 
       </div> 
       <div class="col-md-4"> 
        <img src="Four.jpg"> 
       </div> 
      </div> 
      </div> 

JS

$('.small-image img').closest('.col-md-4').click(function(){ 
     var newimage = ($('.small-image img').closest('.col-md-4').find('img').attr('src')); 
     $('.large-image img').attr('src', newimage); 
    }); 

Answer 1

嘗試用$(this).

$('.small-image img').closest('.col-md-4').click(function(){ 
 
     var newimage = ($(this).closest('.col-md-4').find('img').attr('src')); 
 
    console.log(newimage) 
 
     $('.large-image img').attr('src', newimage); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-8 modal-images"> 
 
     <div class="row large-image"> 
 
     <div class="col-md-12"> 
 
      <img src="One.png"> 
 
      </div> 
 
      </div> 
 
      <br/> 
 
      <div class="row small-image"> 
 
       <div class="col-md-4"> 
 
        <img src="One.png"> 
 
       </div> 
 
       <div class="col-md-4"> 
 
        <img src="Two.jpg"> 
 
       </div> 
 
       <div class="col-md-4"> 
 
        <img src="Three.jpg"> 
 
       </div> 
 
       <div class="col-md-4"> 
 
        <img src="Four.jpg"> 
 
       </div> 
 
      </div> 
 
      </div>

替代方法

它已經與母公司的目標。所以與孩子img

$('.small-image img').closest('.col-md-4').click(function(){ 
     var newimage = ($(this).children('img').attr('src')); 
    console.log(newimage) 
     $('.large-image img').attr('src', newimage); 
    }); 

Answer 2

匹配在單擊處理中，「這個」關鍵字將參照.COL-MD-4格。因此，考慮到以下幾點：

$('.small-image img').closest('.col-md-4').click(function(){ 
    var newimage = ($(this).find('img').attr('src')); 
    $('.large-image img').attr('src', newimage); 
});