一个接一个地插入图像源

Question

Demo

我希望每当我单击任何图像时，该图像 src 都应该转到带有 img1 id 的图像。如果 img1 id 已经有图像，则图像源应该转到具有 img2 id 的图像，依此类推。

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

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>

Answer 1

为空白图片的容器添加唯一ID。

$("#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>

如果您不想更改 HTML 结构，请查看此demo