如何從源div中獲取包含目標圖像的目標div中的單擊圖像

Question

問：如何從包含一些圖像的源div（id =“ p2”）獲取目標div（id =“ p1”）中的點擊圖像。

當前結果：僅顯示最后一張圖像。如果我錯了，請提出其他邏輯。 僅需PS javascript。

在{document.getElementById（“ p1”）。innerHTML =“”;}（即腳本代碼的最后一行）之前需要一些邏輯。 因此，根據當前邏輯，將顯示確切單擊的圖像而不是最后一個圖像

下面是代碼片段：

<!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()" 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()" 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()" 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()" src="http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-611834.jpg"/></br>
</div>
<script>
function myFunction(){
                    var x=document.getElementsByName("obj");
                    y=x.length;
                    for(var i=0;i<y;i++){
                     hi = document.getElementById('obj'+i).src;
                     //alert(hi);  uncommenting I can get url of each picture
                     document.getElementById("p1").innerHTML="<img src='"+hi+"' height=100px ;width=100px centre />";
                    }

}
 </script> 
 </div>
</body>

提前致謝！

Answer 1

您需要有一個參數，該參數傳遞剛剛單擊的內容的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>

如何從源div中獲取包含目標圖像的目標div中的單擊圖像

問題描述

下面是代碼片段：

1 個解決方案

解決方案1
0 已采納 2014-08-16 04:36:38

如何從源div中獲取包含目標圖像的目標div中的單擊圖像

問題描述

下面是代碼片段：

1 個解決方案

解決方案1 0 已采納 2014-08-16 04:36:38

解決方案1
0 已采納 2014-08-16 04:36:38