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

Question

功能：

在页面A中，用户需要使用4个选项来回答问题。 当用户单击任一选项时，当前页面会将用户导航到页面B，在页面B中，将根据用户选择的选项显示图像。

因此，这是一般流程：

页面A：将显示1个随机生成的问题和与该问题相关的4个选项->用户单击选项之一->页面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"]];

要在页面B中显示的图像取决于页面A中选择的选项：

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”时，它应该显示->“ testA1.png”，或者当用户单击“ test12”时，它应该显示->“ testC4.png”，或者当用户单击“ test8”时，它应该显示。显示->“ testB4.png”等...

码：

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

问题：

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

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

错误的行为：

当我单击“ test1”时，它不显示->“ testA1.png”，而是显示-“ testB4.png”，或者当用户单击“ test12”时，它不显示->“ testC4.png”，而是显示- “ testA2.png”或当用户单击“ test8”时，它不显示->“ testB4.png”，而是显示-“ testC2.png”等。

正确的行为：

因此，当用户单击“ test1”时，它应该显示->“ testA1.png”，或者当用户单击“ test12”时，它应该显示->“ testC4.png”，或者当用户单击“ test8”时，它应该显示。显示->“ 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]之类的位置。 如您所见，第一个索引应该是随机选择的问题索引。