一个接一个地插入图像源图像 [英] Insert the image sources one after another image

问题描述

演示

我希望每当我点击任何图像，那么该图像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> 
  

解决方案

将唯一的id添加到空白图片的容器中。

$（＃myImages img [src ='']）将选择 #myImages 这些元素将 src 属性值设置为空白。 first（）将从所选元素中获得第一个元素。 $ b

Demo

data-lang =jsdata-hide =false>

$ （'.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 ：< img class =imgsrc =http：//www.w3schools .com / images / w3schools.png/>< br />< img class =imgsrc =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

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.

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

The HTML code is here.

<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>

解决方案

Add unique id to the container of the blank images.

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

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

这篇关于一个接一个地插入图像源图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！