如何将每个vase(source div)的单花图像添加到集合(target div (id="p1"))，以便目标div具有来自每个source div的三个图像。
我可以设法在target div id="p1"内只获得一张图片。我需要来自每个源div的三个不同图像才能显示在target div中。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
.main {
height: 400px;
width: 800px;
margin: 0px auto;
}
.p1 {
height: 300px;
width: 300px;
background-size: 100% auto;
border-style: outset;
border-radius: 2px;
}
.images {
width: 50px;
height: 50px;
border-radius: 5px;
}
.divs{
float:left;
padding:20px;
margin:5px;
border:solid #000 thin;
}
</style>
<body>
<div class="main">
<div id="p1" class="p1"><img src="" alt="" /><p align="center"><b>COLLECTION</b></p></div>
<div id="p2" class="divs">
<input type="image" class="images" id="obj0" name="obj" onclick="myvase1(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg" /></br>
<input type="image" class="images" id="obj1" name="obj" onclick="myvase1(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg" /></br>
<input type="image" class="images" id="obj2" name="obj" onclick="myvase1(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-293063.jpg" /></br>
<input type="image" class="images" id="obj3" name="obj" onclick="myvase1(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></br><b>vase1</b>
</div>
<div id="p3" class="divs">
<input type="image" class="images" id="obj0" name="obj" onclick="myvase2(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-771362.jpg" /></br>
<input type="image" class="images" id="obj1" name="obj" onclick="myvase2(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-435833.jpg" /></br>
<input type="image" class="images" id="obj2" name="obj" onclick="myvase2(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-661694.jpg" /></br>
<input type="image" class="images" id="obj3" name="obj" onclick="myvase2(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-413011.jpg" /></br><b>vase2</b>
</div>
<div id="p4" class="divs">
<input type="image" class="images" id="obj0" name="obj" onclick="myvase3(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-392478.jpg" /></br>
<input type="image" class="images" id="obj1" name="obj" onclick="myvase3(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-558351.jpg" /></br>
<input type="image" class="images" id="obj2" name="obj" onclick="myvase3(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-630909.jpg" /></br>
<input type="image" class="images" id="obj3" name="obj" onclick="myvase3(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-302761.jpg" /></br><b>vase3</b>
</div>
<script>
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;/>";
}
</script>
</div>
</body>
</html>
答案 0 :(得分：0)
请尝试以下操作：如果我发布了您没想到的内容，请对其进行评论。我会更新代码。
<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>
答案 1 :(得分：0)
在你做任何其他事情之前，有一些事情需要解决。当您在页面上使用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;/>";
}
我已将你的=更改为+ =
这将继续添加到您的目标div，没有设置限制，您无法重新启动。首先这么容易，添加一个函数来清空你的div'目标'
function emptytarget() {
document.getElementById("p1").innerHTML = "<p align=\"center\"><b>COLLECTION</b>";
}
附上活动
<div id="p5" class="p5" onclick="emptytarget()"><p align="center"><b>RESET</b></p></div>
您需要设置一些CSS来定位它。
现在，如果你想从每个花瓶中只添加三朵花，我们将需要计算。你可以;
在功能之外 设置三个计数器。这些将适用于您的所有功能。
var vase1 = 0; //Global variable
var vase2 = 0; //Global variable
var vase3 = 0; //Global variable
现在我们修改上一个函数以获得以下内容;
// 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++;
}
Here是工作页面
Here是代码
我这样编写它很容易理解，但是你可以用更优雅的方式做到这一点。我相信其他贡献者可以改进我的代码，但这是一个开始。
将全局变更为此
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;
}
}
再一次;
Here是工作页面
Here是代码