Javascript/Jquery 通过事件切换对象

Question

我有一个带有两个箭头和一些对象的框架场景，我尝试在对象之间切换，但我没有正确理解，在这里我得到一些帮助会很好：

  AFRAME.registerComponent("fool", {
    init: function() {
        var boxarray = ["#bluebox, #yellowbox, #greenbox]

        boxarray[0] = true;

        if(boxarray[0] = true){
          document.getElementById('bluebox').setAttribute('visible', 'true');
          document.getElementById('bluebox').setAttribute('scale', {x:1,y:1,z:1});
        } else {
          document.getElementById('bluebox').setAttribute('visible', 'false');
          document.getElementById('bluebox').setAttribute('scale', {x:0,y:0,z:0});
        }

        if(boxarray[1] = true){
          document.getElementById('bluebox').setAttribute('visible', 'true');
          document.getElementById('bluebox').setAttribute('scale', {x:1,y:1,z:1});
        } else {
          document.getElementById('bluebox').setAttribute('visible', 'false');
          document.getElementById('bluebox').setAttribute('scale', {x:0,y:0,z:0});
        }

        if(boxarray[2] = true){
          document.getElementById('bluebox').setAttribute('visible', 'true');
          document.getElementById('bluebox').setAttribute('scale', {x:1,y:1,z:1});
        } else {
          document.getElementById('bluebox').setAttribute('visible', 'false');
          document.getElementById('bluebox').setAttribute('scale', {x:0,y:0,z:0});
        }

      function toggleright(){
?help?
      }

      function toggleleft(){
?help?
      }
      })

我尝试给我所有的对象（盒子）一个事件，所以如果事件也发生变化，改变源只是有用的

Answer 1

如果有一种方法可以将“下一个”实体切换为可见，而将“上一个”实体切换为不可见。

这样，您的左/右方法将只确定下一个应该是哪个并使用切换功能。

可以用这样的组件来完成：

AFRAME.registerComponent("foo", {
 init: function() {
  this.objects = ["one", "two", "three"]
  this.iterator = 0
  this.left = AFRAME.utils.bind(this.left, this);
  this.right = AFRAME.utils.bind(this.right, this);
 },
 right: function() {
  let i = (this.iterator - 1) < 0 ? this.objects.length - 1 : this.iterator - 1
  this.toggle(this.iterator, i)
 },
 left: function() {
  let i = (this.iterator + 1) >= this.objects.length ? 0 : this.iterator + 1
  this.toggle(this.iterator, i)
 },
 toggle: function(oldEl, newEl) {
  document.getElementById(this.objects[oldEl]).setAttribute("visible", "false")
  document.getElementById(this.objects[newEl]).setAttribute("visible", "true")
  this.iterator = newEl
 }
})

right 和 left 方法只检查我们是否没有到达数组的开头/结尾，并调用 toggle 方法来切换可见性。

现场小提琴here.