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});
}

我将代码片段放到错误的位置。以下是谷歌Chrome控制台的说法：

未捕获的TypeError：无法读取属性＆＃39; source＆＃39;未定义的

只是看看这意味着什么？如果您需要更多信息，请与我们联系。

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。

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

3 个答案: