A-frame：从场景实体调用的 html 对象答案

【问题标题】：A-frame: html objects called from scene entitiesA-frame：从场景实体调用的 html 对象
【发布时间】：2018-12-30 01:25:56
【问题描述】：

我正在尝试从 A-Frame 场景中的实体控制一些 DOM 元素。这个问题之前在这里被问过：Control HTML Objects with A-Frame Entity。 Noa 编写了一个组件，允许实体“调用”一个 DOM 元素并将其带到场景前面。我以一种我认为相当笨拙的方式添加了“隐藏”功能，并且还添加了场景的不同元素通过同一组件调用不同 DOM 元素的选项。我不明白这一点。是否有必要为每个动作编写不同的组件？我重新混合了 Noa 的 Glitch 以展示我正在尝试做的事情： https://glitch.com/edit/#!/join/391f2bd8-9f3a-4a3d-9426-e849d260081b

非常感谢。

【问题讨论】：

需要进一步阐述。故障不起作用。 script.js 文件为空。更具体的问题将有所帮助。有什么不工作吗？您是否在寻求有关代码的风格建议？组织 DOM 管理的最佳方式？
您好，感谢您的回答。抱歉，错误的 Glitch 链接。我没有在我的项目名称下看到大的共享按钮。就是这样：glitch.com/edit/#!/join/391f2bd8-9f3a-4a3d-9426-e849d260081b 我请求帮助以使 Noa 的组件能够从不同的 a-frame 实体调用不同的 DOM 元素。我希望这个问题现在更清楚了。再次感谢您！

标签： html aframe

【解决方案1】：

我会使用不同类型的组件来执行此操作，该组件需要一个选择器来选择您希望它影响的 HTML：

AFRAME.registerComponent("show-html", {
  schema: { type: "selector" },
  init: function () {
    const target = this.data;
    this.el.addEventListener("click", () => target.classList.add("show"));
  }
});

<a-image show-html="#el_1"></a-image>
<a-image show-html="#el_2"></a-image>

【讨论】：