问题描述
我在a场景中有几个实体，如果我单击一个按钮，我想隐藏它们。 我的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/[email protected]/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° Image</title>
<Meta name="description" content="360° 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/[email protected]/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>
谢谢！
解决方法
myEl.setAttribute('visible',false); 此处 true 和 false 是一个布尔值，因此您无需在字符串中添加“false”。