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

JavaScript - I want to assign two pieces of info to an Array - do I use multidimensional arrays?

本文关键字：数组 是否 一个 信息 两条 分配 JavaScript      更新时间：2023-09-26

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

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

这是我从这个网站中提取的随机播放函数，它随机化数组

<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'];

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

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

这样，您就可以保持一切简单，并为每个对象提供自己的用途：数组提供图像的随机列表，title 对象提供关联的数据（如果需要，您可以简单地添加到其中）。

你可以这样称呼它：

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 答案也是完全有效的。您的选择。

您可以像这样创建一个多维数组（数组数组）：

var images = [['a.jpg', 'title a'], ['b.jpg', 'title b']];

或使用对象数组：

var images = [{url:'a.jpg',title:'title a'}, {url:'b.jpg',title:'title b'}];

我建议对象。它更易于阅读，因为您可以访问某些属性。

images[0][1]

与。

images[0].title

我坚持使用多维数组。这是新代码。感谢您对 Null 和其他所有人的帮助。

var myArray = [['sample1.jpg','Title 1'],['sample2.jpg', 'Title 2'],['sample3.jpg', 'Title 3']];
newArray = shuffle(myArray);
var i = 0;
function test(){
document.getElementById("picture").style.background = "url('/images/"+myArray[i][0]+"') no-repeat center center";
document.getElementById("title").innerHTML = myArray[i][1];
i++;
}
相关文章：