用户单击按钮时图像无法正确显示

Question

功能性：

在第A页中，用户需要回答4个选项的问题。当用户点击任意1个选项时，当前页面将导航用户到页面B，其中将显示一个图像，具体取决于用户选择的选项。

因此，这是一般流程：

页面A：将显示1个随机生成的问题和4个与问题相关的选项 - ＆gt;用户点击其中一个选项 - ＆gt;页面A将导航到页面B.在页面B中，将根据您在页面A中选择的选项显示图像。

我做了什么：

我创建了3个数组：

随机生成的问题：

var QuestionOrder = ["What is A?", "What is B?", "What is C?"];

显示问题的4个选项：

var ChoiceOrder = [["test1", "test2", "test3", "test4"], ["test5", "test6", "test7", "test8"], ["test9", "test10", "test11", "test12"]];

根据页面A中选择的选项在页面B中显示的图像：

var DescriptionOrder = [["testA1.png", "testA2.png", "testA3.png", "testA4.png"], ["testB1.png", "testB2.png", "testB3.png", "testB4.png"], ["testC1.png", "testC2.png", "testC3.png", "testC4.png"]];

因此，当用户点击“test1”时，它应显示 - ＆gt;“testA1.png”或当用户点击“test12”时，它应显示 - ＆gt;“testC4.png”或当用户点击“ test8“，它应该显示 - ＆gt;”testB4.png“等......

代码：

Plunker：https://plnkr.co/edit/5zDNeNG97WrTrhegMYEr?p=catalogue

问题：

我目前能够在用户从页面A中选择后，从数组var DescriptionOrder中显示图像元素。

但是，我目前面临的问题是：

行为错误：

当我点击“test1”时，它没有显示 - ＆gt;“testA1.png”但显示 - “testB4.png”或当用户点击“test12”时，它没有显示 - ＆gt;“testC4。 png“但显示 - ”testA2.png“或当用户点击”test8“时，它没有显示 - ＆gt;”testB4.png“但显示 - ”testC2.png“等......

正确的行为：

因此，当用户点击“test1”时，它应显示 - ＆gt;“testA1.png”或当用户点击“test12”时，它应显示 - ＆gt;“testC4.png”或当用户点击“ test8“，它应该显示 - ＆gt;”testB4.png“等......

意思是，看起来数组var DescriptionOrder是随机的，并且不是根据数组的内部索引关联的。

我做错了什么？我需要一些帮助。

感谢。

Answer 1

我认为这条线没有意义：

printOptionFrame = DescriptionOrder[optionList.indexOf(optionList[flag - 1])][optionList.indexOf(optionList[flag - 1])];

它应该是这样的：

printOptionFrame = DescriptionOrder[random_Question][optionList.indexOf(optionList[flag - 1])];

使用当前代码，您始终尝试访问[2] [2]，[1] [1]，[0] [0]等位置。如您所见，第一个索引应该是随机选择的问题索引。