Question

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

HTML代码在这里。

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

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

逐个插入图像源图像

1 个答案: