Question

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

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

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

理想情况下会说例如1/5如果有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以找出你的位置。

Answer 2

只需将这四行添加到changeImage()函数中，如下所示：

var versionDiv = document.getElementById('versions');
var x = imgs.indexOf(img.src) + 1; // index of current image plus one
var z = x + "/" + imgs_count; // concatenate the strings
versionDiv.textContent = z; //replace the text in the versions div

或者你可以通过避免创建额外的变量来缩短它，这会将上面的内容简化为两行，如下所示：

var x= document.getElementById('versions');
x.textContent = (imgs.indexOf(img.src) + 1) + "/" + imgs_count;

CodePen： https://codepen.io/andrewl64/pen/gzVBdK

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

2 个答案: