Javascript 在“上循环单击事件”函数；动画结束“；

我有一个关于如何在动画结束时循环单击事件本身的问题

我有3张图片要按顺序旋转：

首先单击第一张图片->第一张图片旋转

第二次点击第二张图片->第二张图片旋转

第三次点击第三张图片->第三张图片旋转

添加事件监听器是相同的，所以我尝试使用myEndFunction（）在函数本身上循环，但它似乎不正常

在第二次点击时，第二张图片正在移动，但我仍然必须点击第一张图片

下面是html（非常经典的一个）：

以下是js代码：

var x = document.getElementById("first");
x.addEventListener('click', event => {
    x.classList.add("move");
    x.addEventListener("webkitAnimationEnd", myEndFunction);
    x.addEventListener("animationend", myEndFunction);

    function myEndFunction() {
       x = document.getElementById("second");
    }

});

如果您想尝试，这里有一个代码笔：

我需要你的帮助

var x = document.getElementById("first");x.addEventListener('click', event => {
x.classList.add("move");
  x.addEventListener("webkitAnimationEnd",myEndFunction);
  x.addEventListener("animationend",myEndFunction);});

var y = document.getElementById("second");y.addEventListener('click', event => {
y.classList.add("move");
  y.addEventListener("webkitAnimationEnd",myEndFunction);
  y.addEventListener("animationend",myEndFunction);});

---

这是你想要的吗？/

很可能会将事件侦听器放到图片本身

所以你知道旋转什么。 是的，甚至一个div也可以有一个事件侦听器

---

查询div。添加一个事件侦听器，单击animationPlayState应该运行。否则默认情况下，它已在css中暂停。

您似乎正在使用一个

#id

选择器，该选择器始终返回第一次出现的内容并停止

我的建议是，改用类标识符并重用动作函数

var version1=函数（）{
//获取所有包含该类的容器
var rotateMe=document.querySelectorAll（'.version-1.rotate me'）；
//定义动画持续时间，这比css animationend好
var animationDuration=1000；//毫秒
//递归动画序列
var startSequence=函数（类名、项）{
var[第一，…剩余]=项目；
first.classList.add（'rotate'）；
setTimeout（函数（）{
如果（rest.length>0）{
startSequence（类名，rest）
}
}，动画持续时间）；
};
//单击开始序列的句柄
var handleClick=函数（）{
开始顺序（“旋转”，旋转项）；
};
//检查一个旋转体是否匹配
如果（rotateMe.length>0）{
//将您的操作回调添加到第一个匹配项
rotateMe[0]。addEventListener（'click'，handleClick）；
}
}
//此版本在单击预览元素之前阻止单击
var version2=函数（）{
//获取所有包含该类的容器
var rotateMe=document.querySelectorAll（'.version-2.rotate me'）；
//定义动画持续时间，这比css animationend好
var animationDuration=1000；//毫秒
//活动索引
var-activeElement=0；
//单击开始序列的句柄
var handleClick=函数（索引，项）{
如果（索引===activeElement）{
item.classList.add（'rotate'）；
活性元素+=1；
}
};
对于（变量i=0，l=rotateMe.length；i

.wrapper{
显示器：flex；
}
.轮换我{
边界半径：50%；
溢出：隐藏；
字号：0；
}
.轮换我：第一个孩子{
光标：指针；
}
.旋转，我旋转{
光标：首字母；
}
.旋转，我旋转{
转变：转变1s；
变换：旋转（360度）；
}

Version 1
版本2

否，因为这样我可以在第一张图片之前单击第二张图片，我想强制第一张图片上的第一次单击，第二张图片上的第二次单击等。当我单击图片时，它会使图片旋转，但不会强制单击顺序。我真的想强制第一次点击第一张图片，第二次点击第二张图片等。我仍然会保留代码，链接旋转可以方便地用于其他动画给我一秒钟，我会更新代码，以便它将强制第二张图片自动旋转。你想一个接一个地强制点击还是只是旋转？@minisemin-ur欢迎查看当前更新的代码建议；）@我还添加了第二个版本，我认为第二个版本符合您的要求

var x = document.getElementById("first");
x.addEventListener('click', event => {
    x.classList.add("move");
    x.addEventListener("webkitAnimationEnd", myEndFunction);
    x.addEventListener("animationend", myEndFunction);

    function myEndFunction() {
       x = document.getElementById("second");
    }

});

var x = document.getElementById("first");x.addEventListener('click', event => {
x.classList.add("move");
  x.addEventListener("webkitAnimationEnd",myEndFunction);
  x.addEventListener("animationend",myEndFunction);});

var y = document.getElementById("second");y.addEventListener('click', event => {
y.classList.add("move");
  y.addEventListener("webkitAnimationEnd",myEndFunction);
  y.addEventListener("animationend",myEndFunction);});