JavaScript-如何在Spark AR Studio中循環三個項目

Question

為清楚起見進行編輯：

此問題的上下文不在javascript / html的上下文中。 它是在javascript Spark AR Studio的上下文中。 典型的html / css / javascript方法無法正常工作。 我只有通過此應用程序使用javascript的經驗，這是我第一次學到任何東西。 我在下面列出了對我有用的內容。

---

我在移動ar應用程序中有三個資產，需要在點擊時進行交換，以便每次點擊都可以關閉當前項目的可見性，並打開下一個項目的可見性。 我可以監控點擊並訂閱該事件。 我可以使資產*.hidden = true或false但是我不確定通過資產交換所需的邏輯。

我會為水龍頭創建計數功能（限制為三個嗎？），然后根據生成的隱藏/取消隱藏數量使用if / then？

我以前確實只在Python和一些js中編寫過腳本，但是對代碼好奇嗎？我會在JavaScript中使用什么約定來解決這個難題？ 成功會是什么樣？

Answer 1

這是一個如何使用Javascript單擊一組資產（在本例中為input元素）的示例，一次僅顯示一個資產：

 var ix = 0; var assets = ["x1","x2","x3"].map( function(x) {return document.getElementById(x);} ); function showNextAsset() { assets[ix++].style.display = "none"; assets[ix = (ix < assets.length) ? ix : 0].style.display = "block"; } 

 <form onclick="showNextAsset(); return false;"> <input id="x1" value="foo"> <input id="x2" value="bar" style="display:none"> <input id="x3" value="toto" style="display:none"> </form> 

Answer 2

抬起頭來，我終於想出了該怎么做我需要做的事情，它看起來像這樣：

const TouchGestures = require('TouchGestures');
const Scene = require('Scene');
const D = require('Diagnostics');

//scene assets:
const asset1 = Scene.root.find('plane0');
const asset2 = Scene.root.find('plane1');
const asset3 = Scene.root.find('plane2');
//assets put into array:
const myArray = [asset1,asset2,asset3];
//initial visibility state for assets:
var hideStates = [0,1,1];
//set initial visibility:
hide(myArray,hideStates);



//MAIN EVENT___________________________________________________________________________________
TouchGestures.onTap().subscribe(function (gesture) { // cycle visibility for assets on event

    var hideStates = [1,1,1];
    hide(myArray,hideStates);
    unHide(myArray);

});

//_____________________________________________________________________________________________

//this will move through an array one step at a time, returning the index...
var cycler = {
    current: -1,
    cycle: function(arr) {
        if (this.current == arr.length -1) {
            this.current = 0;
        } else {
            this.current++;
        }
        return this.current;
    }
};


function hide(assets,states) {
    for (var i = 0; i <assets.length; i++) {
        assets[i].hidden = states[i];
    }
};

function unHide(assets) {
    var unhide = cycler.cycle(myArray);
    myArray[unhide].hidden = 0;
};

不知道這是否是最好的做事方法，但是它有效！