JavaScript - 我想将两条信息分配给一个数组 - 我是否使用多维数组？

Question

假设我有 3 张图片。当用户单击网站上的按钮时，我希望显示其中一张随机图像，并且我想要 <h1>Title</h1>标记更改为该图像的标题。

我还运行了一个脚本，该脚本在使用数组之前将其随机化，这样我就可以遍历数组而不显示任何先前显示的图像。

这是我从这个网站上提取的随机化数组的 Shuffle 函数

<script>function shuffle(o){
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] =   o[j], o[j] = x);
return o;};

图片如下:

var myArray = ['sample1.jpg','sample2.jpg','sample3.jpg'];
newArray = shuffle(myArray);
var i = 0;

然后我有了在网站上实际发布图片的功能:

function test(){
document.getElementById("picture").style.background = "url('/images/"+myArray[i]+"')      no-repeat center center";
document.getElementById("title").innerHTML = "(Here is the code that should change the title to the respective image)";
i++;}

当然还有调用随机图片的按钮

<img src="images/button.png" id="testButton" onclick="test()">

现在图片上方有图片标题。在同一个 test() 函数中，我希望更改图像的标题。我可以在代码中的什么地方放置图像的标题？我应该使用多维数组吗？像这样的东西:

var myArray = [['sample1.jpg']['Title 1'],['sample2.jpg']['Title 2'],['sample3.jpg']['Title 3'];

Answer 1

用一个简单的、单独的对象来存储标题，以图像名称为键，就像字典一样？

var titles = {
  'sample1.jpg': 'Title 1',
  'sample2.jpg': 'Title 2',
  'sample3.jpg': 'Title 3'
}

这样您就可以保持一切简单，并为每个对象赋予自己的用途:数组提供随机的图像列表，标题对象提供相关数据(如果需要，您可以简单地添加到它)。

你可以这样调用它:

var image = myArray[i]; // according to your code
var title = titles[image];

所以:

function test() {
  var image = myArray[i];
  document.getElementById("picture").style.background = "url('/images/"+image+"')      no-repeat center center";
  document.getElementById("title").innerHTML = titles[image];
  i++;
}

请注意，null 下面的回答也是完全有效的。您的选择。