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());
}

使用querySelector查找img并将其显示在新的div中

3 个答案: