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

Question

功能：

在页面 A 中，用户需要回答一个有 4 个选项的问题。当用户点击任何 1 个选项时，当前页面会将用户导航到页面 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”等...

代码：

Plunker：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] 等位置。如您所见，第一个索引应该是随机选择的问题索引。