用一个脚本影响一帧中的多个元素

Question

单击视频圈时我尝试做 4 件事：

1. 播放单击的视频球的视频纹理。
2. 将单击的视频球半径扩大到 4200。
3. 使所有具有“homeworld”类的元素消失。
4. 使另外 2 个视频圈（不能将 homeworld 作为一个类）消失。

我用 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 还很陌生，但我已经花了几个小时在这上面，但仍然不明白。预先感谢您的帮助！

Answer 1

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

以隐藏它。