Question

在下面的代码中，我成功地实现了这一点，当有人点击图片的缩略图时，它的全部图片将出现在目标中。

我想知道是否有人知道为多个缩略图创建onclick事件的更好方法我想使其可扩展。

另外，请仅考虑javaScript的答案，因为我没有用jQuery编写（还有！）。

var img = document.getElementById("galleryImg");
var thumb = document.getElementsByClassName("imgThumb");
var p0 = "https://dl.dropboxusercontent.com/u/89495286/test/images/pic1.png";
var p1 = "https://dl.dropboxusercontent.com/u/89495286/test/images/pic2.png";
var p2 = "https://dl.dropboxusercontent.com/u/89495286/test/images/pic3.png";
var p3 = "https://dl.dropboxusercontent.com/u/89495286/test/images/pic4.png";
var p4 = "https://dl.dropboxusercontent.com/u/89495286/test/images/pic5.png";
var p5 = "https://dl.dropboxusercontent.com/u/89495286/test/images/pic6.png";

var pArray = [p0, p1, p2, p3, p4, p5]

img.src = pArray[0];

thumb[0].onclick = function(){pic0()};
function pic0(){img.src = pArray[0]};

thumb[1].onclick = function(){pic1()};
function pic1(){img.src = pArray[1]};

thumb[2].onclick = function(){pic2()};
function pic2(){img.src = pArray[2]};

thumb[3].onclick = function(){pic3()};
function pic3(){img.src = pArray[3]};

thumb[4].onclick = function(){pic4()};
function pic4(){img.src = pArray[4]};

thumb[5].onclick = function(){pic5()};
function pic5(){img.src = pArray[5]};

Answer 1

假设您在pArray中拥有与缩略图相同数量的元素，您可以这样做：

Array.prototype.forEach.call(thumb, function(thumbItem, index) {
  thumbItem.onclick = function() {
    img.src = pArray[index];
  };
});

迭代缩略图，附加onclick处理程序，并根据元素的索引为主图像分配相应的图像。

Answer 2

你迭代数组，但是，单独使用循环不会完全解决问题，因为你在循环中分配了一个函数，这意味着任何外部变量可能会在onclick执行之前发生变化

所以你需要的是一个闭包。

创建一个设置onclick回调
循环调用该函数。

以下是一个例子：

function setOnClick(element, imgSrc) {
  element.onclick = function() { img.src = imgSrc; };
}

for (var i = 0; i < thumb.length; i++) {
  setOnClick(thumb[i], pArray[i]);
}

此功能非常常见，因此它也由Array#forEach实现：

pArray.forEach(function(imgSrc, index) {
  thumb[index].onclick = function() { img.src = imgSrc; };
});

Answer 3

您可以将loop用于任何数组，我们通常会将for loop用于相关数组。

for (var i = 0; i < thumb.length; i++) {
    thumb[i].src = pArray[i]; // change if different src
    thumb[i].onclick = function() { img.src = this.src; };
}

试试：https://jsfiddle.net/Zay_DEV/8r1gqnfx/

＆＃13;

var img = document.getElementById("galleryImg");
var thumb = document.getElementsByClassName("imgThumb");
var pArray = [
	"https://dl.dropboxusercontent.com/u/89495286/test/images/pic1.png",
  "https://dl.dropboxusercontent.com/u/89495286/test/images/pic2.png",
  "https://dl.dropboxusercontent.com/u/89495286/test/images/pic3.png",
  "https://dl.dropboxusercontent.com/u/89495286/test/images/pic4.png",
  "https://dl.dropboxusercontent.com/u/89495286/test/images/pic5.png",
  "https://dl.dropboxusercontent.com/u/89495286/test/images/pic6.png"
]

for (var i = 0; i < thumb.length; i++) {
	thumb[i].src = pArray[i];
	thumb[i].onclick = function() { img.src = this.src; };
}

thumb[0].onclick();

＆＃13;

#galleryImg { max-height: 25vh; }
.imgThumb { width: 100px; height: 50px; }

＆＃13;

<img id="galleryImg"/>
<br />

<img class="imgThumb"/>
<img class="imgThumb"/>
<img class="imgThumb"/>
<img class="imgThumb"/>
<img class="imgThumb"/>
<img class="imgThumb"/>

＆＃13;

更简单的方法来编码javascript系列图像

3 个答案: