单击视频圈时我尝试做 4 件事:
我用 if/else if 接近#4,但有些东西不起作用。该代码正在通过 #3 工作,但是当我尝试添加 #4 的代码时,其他视频球仍然不会消失,尽管代码的其余部分运行良好。
这是我使用的代码:
AFRAME.registerComponent('播放和扩展', { 初始化:函数(){
this.el.addEventListener('click', this.playAndExpand.bind(this));
playAndExpand: function () {
const videoId = this.el.getAttribute('src');
const video = document.querySelector(videoId);
const clickedSphere = this.el.getAttribute('id');
if (video) {
video.play();
this.el.setAttribute('radius', '4200');
const homeworldElements = document.querySelectorAll('.homeworld');
homeworldElements.forEach(element => {
element.setAttribute('visible', false);
});
}
if (clickedSphere === 'sphere1') {
hideElements(['sphere2', 'sphere3']);
} else if (clickedSphere === 'sphere2') {
hideElements(['sphere1', 'sphere3']);
} else if (clickedSphere === 'sphere3') {
hideElements(['sphere1', 'sphere2']);
}
}
});
我对 JS 还很陌生,但我已经花了几个小时在这上面,但仍然不明白。预先感谢您的帮助!
hideElements: function (ids) {
ids.forEach(id => {
const element = document.getElementById(id);
if (element) {
element.setAttribute('visible', 'false');
}
});
}
函数应包含在您定义的 AFRAME 组件
play-and-expand
中。它采用一个元素 ID 数组并迭代该数组。对于每个 ID,它会在 DOM 中找到相应的元素,并将其 visible
属性设置为 false
以隐藏它。