逐个插入图像源图像

Demo

I want that whenever I click on any image, then that image src should go to image with the img1 id. If the img1 id has already an image, then the image source should go to the image having img2 id and so on.

我希望每当我点击任何图像时,那个图像src应该转到带有img1 id的图像。如果img1 id已经有图像,那么图像源应该转到具有img2 id的图像,依此类推。

$( ".img" ).click(function() {
  var newsrc=$( this ).attr("src");
    alert(newsrc);
    $( "#cropimage" ).attr("src",newsrc);
});

The HTML code is here.

HTML代码在这里。

<div id="img-container">
    <img id="cropimage" />
</div>
<div>
    <img src="" id="img1" />
    <img src="" id="img2" />
    <img src="" id="img3" />
    <img src="" id="img4" />
    <img src="" id="img5" />
</div>

1 个解决方案

#1

Add unique id to the container of the blank images.

将唯一ID添加到空白图像的容器中。

$("#myImages img[src='']") will select all the images inside #myImages elements those are having src attribute value as blank. first() will get the first from the selected elements.

$(“#myImages img [src ='']”)将选择#myImages元素中具有src属性值为空的所有图像。 first()将从所选元素中获取第一个。

Demo

$(".img").on('click', function() {
  var newsrc = $(this).attr("src");
  $("#myImages img[src='']").first().attr("src", newsrc);
});

#myImages img {
  display: block;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<img class="img" src="http://www.w3schools.com/images/w3schools.png" />
<br/>
<img class="img" src="https://www.google.co.in/images/icons/hpcg/ribbon-black_68.png" />
<div id="img-container">
  <img id="cropimage" />
</div>
<div id="myImages">
  <img src="" id="img1" />
  <img src="" id="img2" />
  <img src="" id="img3" />
  <img src="" id="img4" />
  <img src="" id="img5" />
</div>

If you don't want to change your HTML structure, Check this demo

如果您不想更改HTML结构,请选中此演示

#1