A-Frame：使用 set.Attribute 更改“可见”答案

【问题标题】：A-Frame: change "visible" with set.AttributeA-Frame：使用 set.Attribute 更改“可见”
【发布时间】：2021-10-16 03:15:22
【问题描述】：

我的场景中有几个实体，如果我点击一个按钮，我想隐藏它们。我的 JS 用于更改属性“可见”：

    <script>
      document.querySelector('#button-right').addEventListener('mouseclick',myEventHandler); 

      myEventHandler: function (evt) {
        let myEl = document.querySelector("#links");
        myEl.setAttribute('visible',"false");
    }
    </script>

如果单击“button_right”，则应该执行脚本：

<!-- left and right button: button-left = reset background // button-right = hide links -->
<a-entity id="buttons" layout="type: line; margin: 2.5" position="-1.75 -2.5 -4">
  <a-entity id="button-left" template="src: #button_reset" data-src="#default"></a-entity>
  <a-entity id="button-right" template="src: #button_hide"></a-entity>
</a-entity>

如果我单击右键，我会收到此错误：

未捕获的 DOMException：无法在“元素”上执行“setAttribute”： “0”不是有效的属性名称。在 HTMLElement.setAttribute (http://127.0.0.1:5500/assets/js/aframe-master.js:77507:51) 在 HTMLElement.setAttribute (http://127.0.0.1:5500/assets/js/aframe-master.js:76931:40) 在 NewComponent.module.exports.setComponentProperty (http://127.0.0.1:5500/assets/js/aframe-master.js:83857:6) 在 HTMLElement.s (https://unpkg.com/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js:1:1990) 在 HTMLElement.emit (http://127.0.0.1:5500/assets/js/aframe-master.js:77546:16) 在 NewComponent.twoWayEmit (http://127.0.0.1:5500/assets/js/aframe-master.js:68002:19) 在 NewComponent.onCursorUp (http://127.0.0.1:5500/assets/js/aframe-master.js:67858:12) 在 HTMLCanvasElement.bound (http://127.0.0.1:5500/assets/js/aframe-master.js:83391:17)

这里是完整的代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>360&deg; Image</title>
  <meta name="description" content="360&deg; Image - A-Frame">
  <script src="assets/js/aframe-master.js"></script>
  <script src="assets/js/play-all-model-animations.js"></script>
  <script src="https://unpkg.com/aframe-template-component@3.x.x/dist/aframe-template-component.min.js"></script>
  <script src="https://unpkg.com/aframe-layout-component@4.3.1/dist/aframe-layout-component.min.js"></script>
  <script src="https://unpkg.com/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script>



</head>

<body>

  <a-scene>
    <a-assets>
      <!-- background images -->
      <img id="oberkirch" src="assets/image/oberkirch.jpg" alt="360 Degree view of the City Oberkirch">
      <img id="schauenburg" src="assets/image/schauenburg.JPG" alt="360 Degree view of the Schauenburg">
      <img id="city" src="assets/image/360_background.jpg" alt="360 Degree view of a city">
      <img id="default" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
      <img id="city-thumb" crossorigin="anonymous"
        src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
      
        <!-- Template for links -->
      <script id="circle" type="text/html">
          <a-entity class="link"
          geometry="primitive: circle; height: 1; width: 1"
          material="color: blue"
          visible="true"
          event-set__mouseenter="material.color: red"
          event-set__mouseleave="material.color: blue"
          event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"
          proxy-event="event: click; to: #image-360; as: image"
          ></a-entity>
        </script>

      <!-- Template for button_reset -->
      <script id="button_reset" type="text/html">
          <a-entity class="button"
          geometry="primitive: plane; height: 0,5; width: 1s"
          material="color: blue"
          event-set__mouseenter="material.color: red"
          event-set__mouseleave="material.color: blue"
          event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"
          proxy-event="event: click; to: #image-360; as: image"
          ></a-entity>
        </script>

      <!-- Template for button_hide -->
      <script id="button_hide" type="text/html">
          <a-entity class="button"
          geometry="primitive: plane; height: 0,5; width: 1s"
          material="color: blue"
          event-set__mouseenter="material.color: red"
          event-set__mouseleave="material.color: blue"
          event-set__click="_target: #link; link.setA"
          ></a-entity>
        </script>

      <!-- Script for hiding the links -->
      <script>
        document.querySelector('#button-right').addEventListener('mouseclick', myEventHandler);

        myEventHandler: function (evt) {
          let myEl = document.querySelector("#links");
          myEl.setAttribute('visible', "false");
        }
      </script>
    </a-assets>


    <!-- Change the background of the scene -->
    <a-sky id="image-360" radius="10" src="#default"></a-sky>

    <!-- Creates a cursor -->
    <a-camera>
      <a-cursor id="cursor"
        animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150">
      </a-cursor>
    </a-camera>

    <!-- Links for changing the background -->
    <a-entity id="links" visible="true" layout="type: line; margin: 2.5" position="-3 -1 -4">
      <a-entity template="src: #circle" data-src="#oberkirch"></a-entity>
      <a-entity template="src: #circle" data-src="#schauenburg"></a-entity>
      <a-entity template="src: #circle" data-src="#city"></a-entity>
    </a-entity>

    <!-- left and right button: button-left = reset background // button-right = hide links -->
    <a-entity id="buttons" layout="type: line; margin: 2.5" position="-1.75 -2.5 -4">
      <a-entity id="button-left" template="src: #button_reset" data-src="#default"></a-entity>
      <a-entity id="button-right" template="src: #button_hide"></a-entity>
    </a-entity>

  </a-scene>
</body>

</html>

谢谢！

【问题讨论】：

如果没有运行和调试的代码，将很难提供帮助。我推荐 Glitch glitch.com/~aframe

标签： javascript html aframe

【解决方案1】：

myEl.setAttribute('visible',false); 这里 true 和 false 是一个布尔值，所以你不需要在字符串中添加为“false”。

【讨论】：

【解决方案2】：

使用单引号（'#links'）也许尽量不要使用数字作为 id

【讨论】：