Использование цикла для нескольких целей в wikitude

Question

В настоящее время у меня есть 20 целей, и у всех их есть другой URL. После пробы, все они должны быть объявлены один за другим, как:

// Create overlay for page one 
var imgOne = new AR.ImageResource("assets/imageOne.png"); 
var overlayOne = new AR.ImageDrawable(imgOne, 1, { 
    offsetX: -0.15, 
    offsetY: 0 
}); 
var pageOne = new AR.Trackable2DObject(this.tracker, "pageOne", { 
    drawables: { 
    cam: overlayOne 
} 
}); 

и снова мы объявляем

// Create overlay for page two 
var imgTwo = new AR.ImageResource("assets/imageTwo.png"); 
var overlayTwo = new AR.ImageDrawable(imgTwo, 0.5, { 
    offsetX: 0.12, 
    offsetY: -0.01 
}); 
var pageTwo = new AR.Trackable2DObject(this.tracker, "pageTwo", { 
    drawables: { 
    cam: overlayTwo 
} 
}); 

Я хочу, чтобы поместить их в цикле вместо. Я нашел еще одну резьбу, имеющую аналогичную проблему, и решение таково:

loop(condition){ 
    new AR.Trackable2DObject(this.tracker, "targetName", { 
    drawables: { 
    cam: new AR.ImageDrawable(new AR.ImageResource("assets/targetImage.png"), 1, { 
    offsetX: -0.15, 
    offsetY: 0 
    }) 
} 
}); 
} 

But my overlay is html with URL, so when i tried 


for(i=0;i<targetList.length;i++){ 
      new AR.Trackable2DObject(this.tracker, targetList[i], { 
      drawables: { 
       cam: [clickMeOverlay, sparkles, 
       new AR.HtmlDrawable({ 
        uri: htmlAssetFolder+targetList[i]+".html" 
        }, 1, { 
        offsetX: 1, 
        offsetY: 0, 
        horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT, 
        verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP, 
        clickThroughEnabled: true, 
        onClick: function() { 
         document.location = "architectsdk://"+targetList[i]; 
         return true; 
         } 
        }) 
       ] 
      } 
     }); 

Вся цель в списке может быть распознана с правильным наложением. но когда я нажимаю наложение, все они приводят к тому же URL-адресу, который является последним элементом в списке. Я пробовал несколько часов T^T за вашу любезную помощь. большое спасибо!!!!

Answer 1

Вам нужно узнать немного о JavaScript Closures.

Проблема в том, что каждая из ваших функций onClick использует ту же переменную i, которая объявлена ​​во внешней области. Правила закрытия означают, что при вызове onClick() значение i будет последним присвоенным ему значением.

Один из способов решить эту проблему, чтобы разрешить URL вне из OnClick() - вы можете попробовать просто хранить разрешенное значение в самом объекте:

for(var i=0;i<targetList.length;i++){ 
      new AR.Trackable2DObject(this.tracker, targetList[i], { 
      drawables: { 
       cam: [clickMeOverlay, sparkles, 
       new AR.HtmlDrawable({ 
        uri: htmlAssetFolder+targetList[i]+".html" 
        }, 1, { 
        offsetX: 1, 
        offsetY: 0, 
        horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT, 
        verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP, 
        clickThroughEnabled: true, 
        url: "architectsdk://"+targetList[i], 
        onClick: function() { 
         // assumes 'this' context points to the current object 
         document.location = this.url; 
         return true; 
         } 
        }) 
       ] 
      } 
     });