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

I have 5 images with the same function in a javascript field and I want to know how to be able to use the function once per image

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

my current code

我目前的代码

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

2 个解决方案

#1

Set once to true at .addEventListener() third parameter

在.addEventListener()第三个参数设置为true

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

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})
});

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

#2

If the environment supports the 3rd parameter in addEventLister, that could is definitely better to use. However, if you need to work with legacy code (because you're working in an intranet, and/or you can't add a build step), you can have something like that:

如果环境支持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; }
}

This will works mostly everywhere, even where addEventListener is not supported at all. But I wouldn't recommend this if you have the proper support of addEventListener and at least ES6; I just add this answer for the record. If you have at least addEventListener (older IE doesn't, they've attachEvent) you could at least have:

这将主要适用于所有地方,即使根本不支持addEventListener。但是如果你有addEventListener和至少ES6的适当支持,我不建议这样做;我只是将这个答案添加到记录中。如果你至少有addEventListener(旧的IE没有,他们有attachEvent)你至少可以:

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
}

If forEach is supported, the loop can be replaced with that.

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

#1