在jQuery中單擊圖像后如何在另一個div中顯示圖像

Question

我的網頁中有一個圖像，我希望當用戶單擊該圖像時，當前圖像也出現在我的網頁中的其他div中，我完全感到困惑，請幫我解決這是我的代碼。

<div id="img"><img src="download1.jpg"></div>

<div><img src="" class="img2"></div>

<img src="download1.jpg" alt="" class="imgs" id="the_id" width="180" height="60" />
<script type="text/javascript">
$(document).ready(function() {
  $('.imgs').click(function(){
    var idimg = $(this).attr('id');
    var srcimg = $(this).attr('src');
    alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
    $(".img2").attr('src',srcimg);
  });
});
</script>

Answer 1

小提琴

使用小提琴進行了嘗試，並且可以使用，這是我使用的代碼。

的HTML

<div id="img"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA"></div>

<div><img src="" class="img2"></div>

<div>click me </div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA" alt="" class="imgs" id="the_id" width="180" height="60" />

jQuery的

$(document).ready(function() {
  $('.imgs').click(function(){
    var idimg = $(this).attr('id');
    var srcimg = $(this).attr('src');
    alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
    $(".img2").attr('src',srcimg);
  });
});

Answer 2

您的代碼是完美的，可以正常工作，以檢查是否正確加載了jquery庫，但您的代碼中沒有看到任何錯誤。

Answer 3

您可以通過將目標圖像的src設置為與所單擊的div中的img src相同來實現此目的。 嘗試：

$('.source-img').on('click', function(){
    var src = $(this).children('img').attr('src');  
    $('#destination').children('img').attr('src', src);
});

看看這個jsFiddle 。

如果您希望圖像不具有包裝器，則只需更改jQuery目標並忽略.children(img)部分。

Answer 4

如果您正在尋找更好的方法，請參閱此JSFiddle

它使用克隆功能

$('.imgs').click(function(){
    $(this).clone().appendTo('#LoadImageHere').attr('id', 'ClonedImage');
});

這意味着您沒有一個帶有空src屬性的圖像，並且可以根據需要向克隆的圖像添加屬性（我在示例中添加了一個ID）。

Answer 5

如果嘗試使用此代碼或此處的組合進行寬度設置，您將獲得非常有趣的結果。“ Plz外觀”。Div元素在自身img標簽中具有寬度源圖像，類“ img2”。圖庫中的其他圖像必須具有相同的ID，例如ID為“ the_id” “並且，如果我們單擊任何圖片，該圖片將顯示在div標簽的空間中。如何獲得彈跳效果圖片必須具有相同的大小。我將兩個div標簽組合在一起，其中冷杉的類為“ img2”，第二個是我的圖片分發我的圖片，使用此頁面上的第一個代碼，我會創建一個不錯的圖片庫。嘗試一下，這並不難。