如何使用 js 脚本更改图像的“可见”属性？

Question

当我的 var n 等于 1 时，我正在尝试更改属性“可见”。我的代码中的某些内容不正常，但我不知道我做错了什么

<a-assets>
        <img id="txt-image" src="/img/txt.png">
        <img id="btn-image" src="/img/btn.png">
</a-assets>

<a-image src="#btn-image" position="0.35666 1.90018 -1.26009" geometry="" scale="0.361 0.09143 0.14667" rotation="10.87 0 0" class="clickable" cursor-listener></a-image>

<a-image src="#txt-image" position="0.1901 1.80662 -1.24519" geometry="" scale="0.85378 0.04647 0.34688" rotation="10.87 0 0" material="" visible="false" cursor-listener></a-image>

var n = 0;

AFRAME.registerComponent('cursor-listener', {
init: function () {
  let text = document.querySelector("#txt-image");
  this.el.addEventListener('click', function (evt) {
    n += 1;
    console.log(n);

    if(n == 1){ 
        text.setAttribute("visible", true);
    }
    if(n == 2){
        window.open('portfolio.html', '_blank');
    }

  });
}
});

直到现在我还没有遇到控制台错误，所以我真的不知道发生了什么？

Answer 1

您正在尝试更改资产项的可见性，而不是 <a-image>。

您可以为<a-image> 实体创建一个专用的id，并将其提供给querySelector。

---

要回答主题 - 您可以使用 setAttribute 切换可见性：

var isVisible = true // or false
element.setAttribute("visible", isVisible);

小提琴here.