时间戳

首页 > 解决方案 > 与 AFrame 点击显示的交互

javascript - 与 AFrame 点击显示的交互

问题描述

所以我想用框架制作一个交互式条形图。例如，单击显示其详细信息的栏。就像这里的故障一样https://glitch.com/~salty-partner-1

问题是，如您所见，当单击第一个栏时，第二个栏文本也会出现。我的问题是，我应该为每个条形图制作一个新的registerComponent（例如：text-show1、text-show2 等）还是有其他方法？

AFRAME.registerComponent("text-show", {
            init: function() {
            let toggle = false
              this.el.addEventListener("click", (e) => {
                let box = document.querySelectorAll(".clickable")
                box.forEach(function(el) {
                    el.setAttribute("visible", toggle)
                })
                toggle = !toggle
              })
            }
          })

我确实为 2-3 条注册了一个新组件，但我有 20 条。所以注册 20 个组件是低效的。

标签： javascriptaframevirtual-realitywebvr

解决方案

您应该将要切换可见的元素传递到架构中。text-show="target: #text1".

这是一个为您执行此操作的组件：https ://github.com/supermedium/superframe/tree/master/components/event-set#aframe-event-set-component event-set__click="_target: #text1; visible: true"

这是 UI 和可点击和其他东西的高级示例：https ://glitch.com/~aframe-building-ui

推荐阅读