Question

我可以设法将每个源div中的所有图像从目标div中获取，然后点击源div中的每个图像（重叠很好）。（这可以通过浏览器中的“Inspect Element”看到）

问：如何将每个花瓶（源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>

提前致谢

Answer 1

您可以为每个组中的每个图像使用单独的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;/>";   
    }
}

请参阅Fiddle。

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

多个源DIV中的图像，添加/替换每个DIV上的当前图像onClick到目标DIV

1 个答案: