javascript - 修改函数以显示当前选定的数组元素

Question

我有以下代码，用于显示同一表情符号的不同版本。

代码运行时，单击图像可循环浏览 imgs 数组以更改图像，或使用左/右箭头键执行相同操作。

我想修改 changeImage 函数，以便在图像下方输出正在显示的数组中的数字。

理想情况下，它会说例如如果有 5 个版本，则为 1/5，然后在循环时为 2/5，依此类推。

var imgs = [ "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.5.0/assets/svg/1F386.svg"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.0/assets/svg/1F386.svg"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.0/assets/svg/1f386.svg"
		   , "https://cdn.jsdelivr.net/emojione/assets/3.0/png/128/1f386.png" ];

var imgs_count = imgs.length;

function changeImage(dir) {

	var img = document.getElementById("imgClickAndChange");
	img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];

	var imgver = document.getElementById("versions");
	imgver.src = imgs_count;

}

document.onkeydown = function(e) {
	e = e || window.event;
	if (e.keyCode == '37') {
		changeImage(-1) //left <- show Prev image
	} else if (e.keyCode == '39') {
		// right -> show next image
		changeImage()
	}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
	<h1>🎆 fireworks</h1>

    <div id="slideshow" style="margin:20px 0px -2px 0px; border:1px solid #eee; border-radius:5px; padding:20px; width:235px;">
        <center>
			<img alt="slideshow" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg" id="imgClickAndChange" onclick="changeImage()" width="128" height="128" />
		</center>
    </div>
	<div id="versions">1 / 5</div>

我遇到的问题是我无法弄清楚如何编辑函数来实现这一目标。

我可以看到我可以通过imgs.length计算数组中的元素数量，并且我已经为我在其中的DIV(versions)分配了一个ID我希望显示该信息，但我用函数中的值替换 div 中的内容的简单测试不起作用。

除了排序之外，我还需要弄清楚如何输出当前查看的数组元素的位置。

非常感谢任何建议，谢谢。

Answer 1

此版本只对您的代码进行了最小的更改。它只是捕获您要在变量中使用的索引，并在显示中使用它:

var imgs = [ "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/1.5.0/assets/svg/1F386.svg"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.0.0/assets/svg/1F386.svg"
		   , "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.0/assets/svg/1f386.svg"
		   , "https://cdn.jsdelivr.net/emojione/assets/3.0/png/128/1f386.png" ];

var imgs_count = imgs.length;

function changeImage(dir) {

	var img = document.getElementById("imgClickAndChange");
  var index = ((imgs.indexOf(img.src) || 0) + (dir || 1) + imgs_count) % imgs_count
	img.src = imgs[index]

	var imgver = document.getElementById("versions");
	imgver.textContent = (index + 1) + ' / ' + imgs_count;

}

document.onkeydown = function(e) {
	e = e || window.event;
	if (e.keyCode == '37') {
		changeImage(-1) //left <- show Prev image
	} else if (e.keyCode == '39') {
		// right -> show next image
		changeImage()
	}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
	<h1>🎆 fireworks</h1>

    <div id="slideshow" style="margin:20px 0px -2px 0px; border:1px solid #eee; border-radius:5px; padding:20px; width:235px;">
        <center>
			<img alt="slideshow" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/1.0.0/assets/svg/1F386.svg" id="imgClickAndChange" onclick="changeImage()" width="128" height="128" />
		</center>
    </div>
	<div id="versions">1 / 5</div>

但也许更好的想法是始终跟踪索引，而不是查询 DOM 来找出您所在的位置。