Javascript/Jquery 通过事件切换对象

Question

我有一个带有两个箭头和一些对象的 aframe 场景，我尝试在这些对象之间切换，但我做错了，如果我能得到一些帮助就更好了：

  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

如何使用一种方法将 "next" 实体切换为可见，而将 "previous" 实体切换为不可见。

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

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

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 方法。

直播fiddlehere.

Javascript/Jquery 通过事件切换对象

Javascript/Jquery toggle though objects with event

javascript

arrays

function

toggle

aframe