Question

基本上，我试图创建一个游戏，其目标是点击图像，使它们消失。

我已经制作了一个功能，可以在屏幕上的随机位置上生成一个图像。然后我也做了一个间隔，所以它在随机位置产生了15张图像。现在我希望图像在点击时消失。

我对这样做的想法是做一个＆＃34;点击＆＃34;功能，所以如果点击图像，＆＃34; img.style.height =＆＃39; 0px＆＃39;;

但是，我没有得到这个或任何东西。

Answer 1

在文档中插入所有图像后，为所有图像定义click侦听器并在单击时隐藏图像。这里有一个简单的例子

＆＃13;

function hide(el) {
  el.style.display = 'none';
}

var imgs = document.getElementsByTagName("img");

for(let i = 0; i < imgs.length; i ++) {
imgs[i].addEventListener('click', function(e) {
  hide(e.target);
});
}

＆＃13;

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgYxw854mGOAp8f16evj_WYw_Ph385nUVygQdxHvuD9b3ueJxT0A" id="1" alt="Mountain View 1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8_MiTkMX9nLJ9udtnwOQekIrQwUQ9KMZiU4fLfI7YhXCyIGZn" id="2" alt="Mountain View 2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgR4KM-zrVRmfdGPf5bll9vq4uLw7FSLpTmHUf9-RkYZ92Ey8Q" id="3" alt="Mountain View 3">

＆＃13;

您的代码应该像这样更改

＆＃13;

function SpawnW() {
  var img = document.createElement("img");
  img.setAttribute("style", "position:absolute;");
  img.setAttribute("src", "women3.png");
  document.body.appendChild(img);
  img.setAttribute("onclick", "this.style.display = 'none'");
  // pictureNumber++;
}

SpawnW();

＆＃13;

希望这会对你有所帮助。

Answer 2

使用

<img onclick="this.style.visibility = 'hidden'" src="..." />

如果你想留下图像占用的空间，否则：

<img onclick="this.style.display = 'none'" src="..." />

如果需要从对象数组中删除图像，还需要定义一个函数。

在您的代码中：

img.setAttribute("onclick", "this.style.visibility = 'hidden'" );

或

img.setAttribute("onclick", "this.style.display = 'none'" );

单击时删除图像

2 个答案: