Javascript 目标div中的多个图像来自不同的源div

如何将每个

花瓶（源div）

中的单个花朵图像添加到集合

（目标div（id=“p1”）

，以便目标div从每个

源div中有三个图像

我只能在
目标div id=“p1”
中获得一个图像。我需要在
目标div
中显示每个源div的三个不同图像

代码：

无标题文件
梅因先生{
高度：400px；
宽度：800px；
保证金：0px自动；
}
.p1{
高度：300px；
宽度：300px；
背景尺寸：100%自动；
边界样式：开始；
边界半径：2px；
}
.图像{
宽度：50px；
高度：50px；
边界半径：5px；
}
.分区{
浮动：左；
填充：20px；
保证金：5px；
边框：实心#000薄；
}
收集







花瓶1







花瓶2







vase3
函数myvase1（id）{
document.getElementById（“p1”）.innerHTML=“”；
}
函数myvase2（id）{
document.getElementById（“p1”）.innerHTML=“”；
}
函数myvase3（id）{
document.getElementById（“p1”）.innerHTML=“”；
}
请尝试以下操作：如果我发布了您不期望的内容，请发表评论。我会更新代码

 <div id="p1" class="p1">
     <div id="t1"></div>
     <input type="hidden" id="p1Hidden" />
     <input type="hidden" id="p2Hidden" />
     <input type="hidden" id="p3Hidden" />
     <p align="center">
         <b>COLLECTION</b>
     </p>
 </div>


  <script>
        function setImageSrc(src,vaseNum)
        {
           if(vaseNum == 1)
               document.getElementById("p1Hidden").value = src;
           else if(vaseNum == 2)
               document.getElementById("p2Hidden").value = src;
           else if(vaseNum == 3)
               document.getElementById("p3Hidden").value = src;
           if(document.getElementById("p1Hidden").value != "" && document.getElementById("p2Hidden").value != "" && document.getElementById("p3Hidden").value != "")
           {
               document.getElementById("t1").innerHTML = "<img src='" + document.getElementById("p1Hidden").value + "'/><img src='" + document.getElementById("p2Hidden").value + "'/><img src='" + document.getElementById("p3Hidden").value + "'/>";
           }
        }
        function myvase1(id) {               
                setImageSrc(id.getAttribute("src"),1);  

        }
         function myvase2(id) {               
                setImageSrc(id.getAttribute("src"),2); 

        }
        function myvase3(id) {               
               setImageSrc(id.getAttribute("src"),3);  

        }
    </script>



收集

函数setImageSrc（src，vaseNum）
{
如果（vaseNum==1）
document.getElementById（“p1Hidden”）.value=src；
else if（vaseNum==2）
document.getElementById（“p2Hidden”）.value=src；
else if（vaseNum==3）
document.getElementById（“p3Hidden”）.value=src；
if（document.getElementById（“p1Hidden”）.value！=“”&document.getElementById（“p2Hidden”）.value！=“”&document.getElementById（“p3Hidden”）.value！=“”）
{
document.getElementById（“t1”）.innerHTML=“”；
}
}
函数myvase1（id）{
setImageSrc（id.getAttribute（“src”），1）；
}
函数myvase2（id）{
setImageSrc（id.getAttribute（“src”），2）；
}
函数myvase3（id）{
setImageSrc（id.getAttribute（“src”），3）；
}
在你做其他事情之前，有一些事情需要解决。当您在页面上使用id=”“时，它应该是唯一的。现在，您有相同的ID引用3个不同的对象

将您的ID更改为

id="p2obj0"
id="p2obj1"
id="p2obj2"
id="p2obj3"

id="p3obj0"
id="p3obj1"
id="p3obj2"
id="p3obj3"

id="p4obj0"
id="p4obj1"
id="p4obj2"
id="p4obj3"

每个函数myvase1（）、myvase2（）、myvase3（）都会覆盖完整的innerHTML

将代码稍微更改为

function myvase1(id) {               
  document.getElementById("p1").innerHTML += "<img src='" + id.getAttribute("src") + "' id = one height=100px ;width=100px;/>";   
}
function myvase2(id) {               
  document.getElementById("p1").innerHTML += "<img src='" + id.getAttribute("src") + "' id = one height=100px ;width=100px;/>";   
}
function myvase3(id) {               
  document.getElementById("p1").innerHTML += "<img src='" + id.getAttribute("src") + "' id = one height=100px ;width=100px;/>";   
}

现在我们修改前面的函数，使其具有以下内容：

//  Reset target content and counters
function emptytarget() {               
  document.getElementById("p1").innerHTML = "";   
  vase1 = 0;
  vase2 = 0;
  vase3 = 0;
}

function myvase1(id) {               
  if(vase1 < 3) document.getElementById("p1").innerHTML += "<img src='" + id.getAttribute("src") + "' id = one height=100px ;width=100px;/>";   
  vase1++;
}
function myvase2(id) {               
  if(vase2 < 3) document.getElementById("p1").innerHTML += "<img src='" + id.getAttribute("src") + "' id = one height=100px ;width=100px;/>";   
  vase2++;
}
function myvase3(id) {               
  if(vase3 < 3) document.getElementById("p1").innerHTML += "<img src='" + id.getAttribute("src") + "' id = one height=100px ;width=100px;/>";   
  vase3++;
}

将您的事件从

onclick="myvase1(this)",.....

到

将三个功能替换为一个

function myvase(source, id) {               
  if(vase[source] < 3) document.getElementById("p1").innerHTML += "<img src='" + id.getAttribute("src") + "' id = one height=100px ;width=100px;/>";   
  vase[source]++;
}

函数myvase（源代码，id）{
if（vase[source]<3）document.getElementById（“p1”）.innerHTML+=“”；
花瓶[源]+；
}

将重置替换为

function emptytarget() {               
  document.getElementById("p1").innerHTML = "<p align=\"center\"><b>COLLECTION</b>";   
  for (key in vase) {
    vase[key] = 0;
  }
}

函数emptytarget（）{
document.getElementById（“p1”）.innerHTML=“
集合”；
用于（钥匙插入花瓶）{
花瓶[钥匙]=0；
}
}

再次

这是工作页吗

代码是
你的意思是收藏中总共有9张图片，还是每个花瓶有3张一朵花？@neli是的，我的意思是每个花瓶有3张一朵花。我给了你一个解决方案，其中有一些例子说明了它的作用。进入目标div的图像需要调整大小以整齐地适应。我试图向您展示如何这样做以帮助您学习。解决方案也会有所帮助。进入目标div的图像需要调整大小以整齐地适应。
//  Reset target content and counters
function emptytarget() {               
  document.getElementById("p1").innerHTML = "";   
  vase1 = 0;
  vase2 = 0;
  vase3 = 0;
}

function myvase1(id) {               
  if(vase1 < 3) document.getElementById("p1").innerHTML += "<img src='" + id.getAttribute("src") + "' id = one height=100px ;width=100px;/>";   
  vase1++;
}
function myvase2(id) {               
  if(vase2 < 3) document.getElementById("p1").innerHTML += "<img src='" + id.getAttribute("src") + "' id = one height=100px ;width=100px;/>";   
  vase2++;
}
function myvase3(id) {               
  if(vase3 < 3) document.getElementById("p1").innerHTML += "<img src='" + id.getAttribute("src") + "' id = one height=100px ;width=100px;/>";   
  vase3++;
}

var vase = new Array();
vase['p2'] = 0;
vase['p3'] = 0;
vase['p4'] = 0; // Global variable declaration 

onclick="myvase1(this)",.....

onclick="myvase('p2', this)"
onclick="myvase('p3', this)"
onclick="myvase('p4', this)"

function myvase(source, id) {               
  if(vase[source] < 3) document.getElementById("p1").innerHTML += "<img src='" + id.getAttribute("src") + "' id = one height=100px ;width=100px;/>";   
  vase[source]++;
}

function emptytarget() {               
  document.getElementById("p1").innerHTML = "<p align=\"center\"><b>COLLECTION</b>";   
  for (key in vase) {
    vase[key] = 0;
  }
}