Gibt es eine Möglichkeit, das Bild nach dem Klicken auszublenden und beim erneuten Klicken anzuzeigen?

Question

Ich habe ein Bild, das ein Objekt überlagert. Ich möchte darauf klicken und es ausblenden, das Objekt anzeigen (virtueller 360-Grad-Rundgang) und dann, wenn auf den virtuellen Rundgang geklickt wird, genau dasselbe Bild anzeigen.

<img src="https://i.ibb.co/ZBkxZHW/360-overlay-white.png" onclick="this.style.display='none';" style="position:absolute;opacity:;left:0%;top:0%;width:100%;height:400px;margin-left:0px;margin-top:0px;z-index:100;" />

<object scrolling="no" data="https://via.placeholder.com/400" width="100%" height="400" type="text/html">
</object>

Answer 1

我不确定您想要什么隐藏行为，但如果页面中应保留空间，您可以切换可见性属性。

您可以使用事件侦听器而不是内联 JavaScript 来完成此操作。另请注意，对象没有单击事件，因此我们将其放在包装器上并禁用对象上的单击事件。请参阅如何将点击事件绑定到对象标记？。

document.querySelector('.img-thumb').addEventListener('click', event => {
  event.currentTarget.style.visibility = 'hidden';
  document.querySelector('.obj-wrapper').style.visibility = 'visible';
});

document.querySelector('.obj-wrapper').addEventListener('click', event => {
  event.currentTarget.style.visibility = 'hidden';
  document.querySelector('.img-thumb').style.visibility = 'visible';
});

.img-thumb {
  position: absolute;
  opacity: ;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 400px;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 100;
}

.obj-wrapper {
  visibility: hidden;
}

.obj-wrapper object {
  pointer-events: none;
}