图像在多个源DIV，添加/替换当前图像从每个DIV点击到目标DIV

Images in multiple source DIV, add/replace the current image from each DIV onClick to target DIV

本文关键字：DIV 图像 目标 替换 添加      更新时间：2023-09-26

我可以设法从每个源div到目标div的所有图像，在onClick源div中的每个图像后(重叠是好的)。(可以在浏览器的"Inspect Element"中看到)

Q:如何从每个各自的花瓶(源div)添加/替换单个花图像到集合(目标div (id="p1"))，使目标div有三个图像，一次一个来自每个源div。

我只需要从每个源div到目标div的单个图像。谁来帮帮我。

代码: 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
</head>
<style>
    .main {
        height: 400px;
        width: 800px;
        margin: 0px auto;
    }
    .p1 {
        position:relative;
        height: 300px;
        width: 300px;
        background-size: 100% auto;
        border-style: outset;
        border-radius: 2px;
    }
    .p1 img{
        position:absolute;
        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>

Thanks in advance

您可以为每个组中的每个图像使用单独的id。然后检查这个id的图像是否已经存在。如果是，则只需要修改src属性。

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

看到小提琴。

我相信，解决方案可以更漂亮，但我不知道你的最终目标是什么

相关文章：