Javascript 如何从包含一些图像的源div中获取目标div内的单击图像
问:如何从包含一些图像的源divid=p2中获取目标divid=p1中单击的图像 当前结果:仅显示最后一张图像。如果我错了,请建议其他逻辑。 只需要javascript {document.getElementByIdp1.innerHTML=;}之前需要一些逻辑,即脚本代码的最后一行。因此,将显示准确的单击图像,而不是根据当前逻辑显示的最后一个图像 下面是代码片段:Javascript 如何从包含一些图像的源div中获取目标div内的单击图像,javascript,html,Javascript,Html,问:如何从包含一些图像的源divid=p2中获取目标divid=p1中单击的图像 当前结果:仅显示最后一张图像。如果我错了,请建议其他逻辑。 只需要javascript {document.getElementByIdp1.innerHTML=;}之前需要一些逻辑,即脚本代码的最后一行。因此,将显示准确的单击图像,而不是根据当前逻辑显示的最后一个图像 下面是代码片段: 提前谢谢 您需要有一个参数来传递刚刚单击的内容的ID。然后需要获取已传递的ID的属性 给你: <!doctype html
提前谢谢 您需要有一个参数来传递刚刚单击的内容的ID。然后需要获取已传递的ID的属性 给你:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
.main {
height: 400px;
width: 200px;
margin: 0px auto;
}
.p1 {
height: 200px;
width: 200px;
background-size: 100% auto;
border-style: outset;
border-radius: 2px;
}
.images {
width: 50px;
height: 50px;
border-radius: 5px;
}
</style>
<body>
<div class="main">
<div id="p1" class="p1"><img src="" alt="" /></div>
<div id="p2">
<input type="image" class="images" id="obj0" name="obj" onclick="myFunction(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="myFunction(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="myFunction(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="myFunction(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></br>
</div>
<script>
function myFunction(id) {
document.getElementById("p2").onclick = function () {
document.getElementById("p1").innerHTML = "<img src='" + id.getAttribute("src") + "' height=100px ;width=100px centre />";
}
}
</script>
</div>
</body>
为什么不将输入图像的唯一id作为参数传递给myFunction?e、 g.myFunctionobj0、myFunctionobj1等。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
.main {
height: 400px;
width: 200px;
margin: 0px auto;
}
.p1 {
height: 200px;
width: 200px;
background-size: 100% auto;
border-style: outset;
border-radius: 2px;
}
.images {
width: 50px;
height: 50px;
border-radius: 5px;
}
</style>
<body>
<div class="main">
<div id="p1" class="p1"><img src="" alt="" /></div>
<div id="p2">
<input type="image" class="images" id="obj0" name="obj" onclick="myFunction(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="myFunction(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="myFunction(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="myFunction(this)" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg" /></br>
</div>
<script>
function myFunction(id) {
document.getElementById("p2").onclick = function () {
document.getElementById("p1").innerHTML = "<img src='" + id.getAttribute("src") + "' height=100px ;width=100px centre />";
}
}
</script>
</div>
</body>