如何通過使用jquery交換圖像？

Question

我有一個主圖像，當我點擊該圖像時，一個模式框打開，其中有3個圖像。所以當我點擊模態框中的圖像之一時，它必須與主圖像交換我沒有任何想法如何做到這一點。請幫我我的代碼放在這裏

<a href="#" data-toggle="modal" data-target="#myModal"><img class="img responsive curtain1"id="1" src="curtain.jpeg" ></a> 

<!-- Modal content--> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
    <div class="row"> 
    <div class="col-sm-4" id = "1"> 
    <img src="curtaina1.jpg"style="height:35%;width:45%;" alt="one"> 
    </div> 
    <div class="col-sm-4" id = "2"> 
    <img src="curtaina1.jpg"style="height:35%;width:45%;"alt="two"> 
    </div> 
    <div class="col-sm-4" id = "3"> 
    <img src="curtaina1.jpg"style="height:35%;width:45%;"alt="three"> 
    </div> 
    </div> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
</div> 

Answer 1

要交換，你只是需要與當前一個替換圖像路徑的圖像。

<a href="#" data-toggle="modal" data-target="#myModal"> 
    <img class="img responsive curtain1" id="mainImage" src="curtain.jpeg" > 
</a> 

<!-- Modal content--> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
    <div class="row"> 
    <div class="col-sm-4" id="1"> 
    <img src="curtaina1.jpg"style="height:35%;width:45%;" alt="one" class="image1"> 
    </div> 
    <div class="col-sm-4" id="2"> 
    <img src="curtaina1.jpg"style="height:35%;width:45%;"alt="two" class="image2"> 
    </div> 
    <div class="col-sm-4" id="3"> 
    <img src="curtaina1.jpg"style="height:35%;width:45%;"alt="three" class="image3"> 
    </div> 
    </div> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
</div> 

用於交換，請使用以下的jQuery：

$('.image').click(function() { 
    $("#mainImage").attr('src',$(this).attr('src')); 
}) 

請試試這個代碼。