Question

我在javascript字段中有5个具有相同功能的图像，我想知道每个图像如何能够使用该功能

我当前的代码

function move()
{
    // move to the first now
    document.getElementsByTagName('div')[0].insertBefore
    (this, document.getElementsByTagName('div')[0].firstChild)
}

img1.onclick=move
img2.onclick=move
img3.onclick=move
img4.onclick=move
img5.onclick=move

Answer 1

在once第三个参数

处将true设置为.addEventListener()

[img1, img2, img3, img4, img5]
.forEach(function(img) {
  img.addEventListener("click", move, {once:true})
});

＆＃13;

var [img1, img2, img3, img4, img5] = document.images;

function move() {
  alert(this.alt)
}

[img1, img2, img3, img4, img5]
.forEach(function(img) {
  img.addEventListener("click", move, {once:true})
});

＆＃13;

<img alt="1"><img alt="2"><img alt="3"><img alt="4"><img alt="5">

＆＃13;

Answer 2

如果环境支持addEventLister中的第3个参数，那么使用它肯定会更好。但是，如果您需要使用遗留代码（因为您在Intranet中工作，和/或您无法添加构建步骤），您可以使用类似的东西：

var imgs = [img1, img2, img3, img4, img5];

for (var img, i = 0; img = imgs[i++];) {
  img.onclick = function() { move.call(this); this.onclick = null; }
}

即使在根本不支持addEventListener的情况下，这也适用于所有地方。但如果您得到addEventListener且至少ES6的适当支持，我不会建议这样做;我只是将这个答案添加到记录中。如果您至少有addEventListener（旧版IE没有，他们只有attachEvent），您至少可以拥有：{/ p>

var imgs = [img1, img2, img3, img4, img5];

for (var img, i = 0; img = imgs[i++];) {
  img.addEventListener("click", function listener() {
    this.removeEventListener("click", listener, false);
    move.call(this);
  }, false); // in some browser the `useCapture` is still not optional
}

如果支持forEach，则可以用该替换循环。

如何使每个图像的功能工作一次

2 个答案: