Question

我编写的JavaScript代码会在点击我的网站时显示图片。如何在用户完成后添加关闭方式？

function picture() {
  var a = document.getElementById('QR');
  a.innerHTML = "https://www.yoapoyord.com/wp-content/uploads/2017/09/Elfactor3.jpg";
  a.style.display = 'block';
}

<img id="QR" src="https://www.yoapoyord.com/wp-content/uploads/2017/09/Elfactor3.jpg" style="display:none;" />
<button onclick="picture()">Apoyar</button>

https://jsfiddle.net/dmtakr3w/

Answer 1

要在显示图像后关闭该图像，可以通过获取父元素并调用.removeChild（node）来删除该图像;在父元素上。

function closePicture() {
  var a = document.getElementById('QR');
  var parent = a.parentNode;
  console.log(parent);
  parent.removeChild(a);
}

如果将此功能分配给按钮，则可以通过单击它来关闭图像：

<button onclick="closePicture()">Close</button>

您还可以执行setTimeout（）以在大约几秒钟后自动关闭图像：

//打开后5秒钟后删除图像：

function picture() { 
  var a = document.getElementById('QR');
  a.innerHTML = "https://www.yoapoyord.com/wp-content/uploads/2017/09/Elfactor3.jpg";
  a.style.display='block';

  setTimeout(function() {
    var a = document.getElementById('QR');
    a.parentNode.removeChild(a);
  }, 5000);
}

Answer 2

正如Sag1v在评论中所说，只需在QR码标签上添加一个点击事件，然后将显示切换回无。

function picture() {
  var a = document.getElementById('QR');
  a.innerHTML = "https://www.yoapoyord.com/wp-content/uploads/2017/09/Elfactor3.jpg";
  a.style.display = 'block';
}

function closePicture() {
    var a = document.getElementById('QR');
    a.style.display = 'none';
}

<img id="QR" src="https://www.yoapoyord.com/wp-content/uploads/2017/09/Elfactor3.jpg" style="display:none;" onclick="closePicture()" />
<button onclick="picture()">Apoyar</button>

显示后如何关闭图片？

2 个答案: