Javascript 如何使用addEventListener在阵列内导航?
我正在尝试为项目设置滑块。我有一个对象数组,每个对象都包含一个图像和一个图例。每次用户单击“下一个”或“上一个”按钮时,它都应该显示数组的下一个或上一个对象。问题是它显示的是同一个图像,而不是下一个、第三个、第五个等等Javascript 如何使用addEventListener在阵列内导航?,javascript,arrays,addeventlistener,Javascript,Arrays,Addeventlistener,我正在尝试为项目设置滑块。我有一个对象数组,每个对象都包含一个图像和一个图例。每次用户单击“下一个”或“上一个”按钮时,它都应该显示数组的下一个或上一个对象。问题是它显示的是同一个图像,而不是下一个、第三个、第五个等等 var index = 0; var images = [ {image: 'images/1.jpg', legend: 'Street Art'}, {image: 'images/2.jpg', legend: 'Fast Lane'}, {imag
var index = 0;
var images = [
{image: 'images/1.jpg', legend: 'Street Art'},
{image: 'images/2.jpg', legend: 'Fast Lane'},
{image: 'images/3.jpg', legend: 'Colorful Building'},
{image: 'images/4.jpg', legend: 'Skyscrapers'},
{image: 'images/5.jpg', legend: 'City by night'},
{image: 'images/6.jpg', legend: 'Tour Eiffel la nuit'}
];
var previous = document.getElementById('slider-previous');
var next = document.getElementById('slider-next');
next.addEventListener('click', function() {
img.src= images[index++].image;
figcaption.textContent = images[index++].legend;
});
previous.addEventListener('click', function() {
img.src= images[index--].image;
figcaption.textContent = images[index--].legend;
});
谢谢你,菲尔
next.addEventListener('click', function() {
++index;
img.src= images[index].image;
figcaption.textContent = images[index].legend;
});
previous.addEventListener('click', function() {
--index;
img.src= images[index].image;
figcaption.textContent = images[index].legend;
});
在每个事件处理程序中只增加/减少索引一次。另外,您希望在
index
前面加上适当的运算符,而不是使用后缀,即++index
您应该发布一个简单的提琴,您的代码看起来应该可以工作(尽管因为您增加了两次,所以跳过了图像)index++
首先返回值,然后再增加它<代码>++index首先递增,然后返回值。