控制台说我有错误是什么？

Question

我的代码运行正常，但是当我在google chrome上检查控制台时，出现错误。 出于好奇，我真的很想知道这意味着什么，因为代码似乎运行良好。

这是我的代码：

var images = [];
var imageIndex = 0;
var $mainImage = $(".thumb-large img");
var $mainCaption = $(".thumb-large p");
var $thumbnails = $(".thumbnails img");
//var $mainName = $(".thumb-large-descrip p.name")



function showImage(index) {
  $mainImage.attr({src: images[index].source});// this is where the error is showing
  $mainCaption.text(images[index].caption);
  $mainImage.attr({name: images[index].artistName});
}

我在代码中指出错误的地方给出了摘要。 以下正是Google Chrome控制台所说的内容：

未捕获的TypeError：无法读取未定义的属性“源”

只是在寻求关于这意味着什么的建议？？？ 如果您需要更多信息，请与我们联系。

Answer 1

数组var images = []; 不包含任何元素。

如果您的数组是var arr = ['a','b','c']并且您尝试访问arr[5] ，则它将返回undefined 。 这就是这里发生的事情。

将一些数据添加到您的阵列。

在您的情况下，它看起来像：

var images = [
  { source: 'http://placehold.it/350x150',
    caption: 'This thing',
    artistName: 'troy beckett'
  },
  { source: 'http://placehold.it/250x250',
    caption: 'Another thing',
    artistName: 'troy beckett'
  }
];

Answer 2

您需要先检查索引处的图像是否存在，然后再尝试访问它。 您可以这样做：

function showImage(index) {
  if(images.length > index) { //This checks that something exists at that index and only if it exists does the following code run
    $mainImage.attr({src: images[index].source});
    $mainCaption.text(images[index].caption);
    $mainImage.attr({name: images[index].artistName});
  } else {
    console.log("Tried to access a nonexistent image at index: " + index)
  }
}

Answer 3

images[index]在特定点不存在。 使用调试器查看错误之前index的值是什么。

向我们展示您在哪里调用showImage的代码，以及如何初始化images 。