使用querySelector查找img並將其顯示在新的div中

Question

我有一個js函數，在覆蓋效果出現時單擊按鈕應在當前部分中選擇一個圖像，然后在新的div中顯示該圖像。 我使用查詢選擇器，但我想我使用了錯誤的方式，因為該功能無法正常工作。 我在哪里弄錯了？ 還是應該使用另一種方法？

<div class="lots">
<div class="f-lot" >
            <div class="overlay" >
            <input type="button"  value="choice"   name="myBtn"  
            onclick="prChoice()"/>
            </div>
            <label for="choice" >           
                <img src="lot1.jpg>             
            </label>                    
            </div>

        <div class="f-lot">
        <div class="overlay">
            <input type="radio"  value="choice1"  name="myBtn" onclick="prChoice()"/>
            </div>
            <label for="choice1">               
                <img src="lot2.jpg">
            </label>    
        </div>
    </div>
    <div id="newsection"></div>

<script>    
 function prChoice(elem){
  var div = document.getElementById('newsection');
  var val=elem.document.querySelector('.f-lot > img');
 div.innerHTML +=' <img src="'+val+'">'
 }
 </script>

Answer 1

這應該做您想要的：

function prChoice(elem) {
  var div = document.getElementById('newsection');
  var val = elem.closest(".f-lot").querySelector('img');
  div.innerHTML += ' <img src="' + val.src + '">'
}

請注意，您的第一個<img src="lot1.jpg>缺少結尾處的"

你也需要添加this到onclick="prChoice()" ，因為如果沒有，那么你的功能將不知道什么elem是

演示

 function prChoice(elem) { var div = document.getElementById('newsection'); var val = elem.closest(".f-lot").querySelector('img'); div.innerHTML += ' <img src="' + val.src + '">' } 

 <div class="lots"> <div class="f-lot"> <div class="overlay"> <input type="button" value="choice" name="myBtn" onclick="prChoice(this)" /> </div> <img src="lot1.jpg"> </div> <div class="f-lot"> <div class="overlay"> <input type="button" value="choice" name="myBtn" onclick="prChoice(this)" /> </div> <img src="lot2.jpg" /> </div> </div> <div id="newsection"></div> 

Answer 2

從querySelector使用：

var src= document.querySelector("#id-for-image img").src;

請注意，選擇器必須與CSS規范兼容。 這意味着您的ID不能以數字開頭。

如果您確實無法修復您的ID（這很糟糕，因為它會導致其他問題），那么您可以使用這種選擇器：

var src= document.querySelector('[id="0a03"] img').src;

Answer 3

如果僅將圖像復制到新部分，則最好使用appendChild：

function prChoice(elem){
   var div = document.getElementById('newsection');
   var img = elem.document.querySelector('.f-lot img')// here you get the element not the src, so can not assign the element to the img src;
   div.appendChild(img.cloneNode());
}