Javascript 使用jquery按顺序切换旋转木马中的图像

我有以下HTML代码：

<a class="item overlay"><img src="img/1.jpg"></a>
<a class="item overlay"><img src="img/2.jpg"></a>
<a class="item overlay"><img src="img/3.jpg"></a>
<a class="item overlay"><img src="img/4.jpg"></a>
<a class="item overlay"><img src="img/5.jpg"></a>

这只适用于单个图像，但我想对旋转木马中的所有图像执行相同的操作，而无需重复上面相同的JS代码

---

您有什么建议？

如果您为每个图像添加一个属性，该怎么办

<a class="item overlay"><img data-num="1" src="img/1.jpg"></a>
<a class="item overlay"><img data-num="2" src="img/2.jpg"></a>
<a class="item overlay"><img data-num="3" src="img/3.jpg"></a>
<a class="item overlay"><img data-num="4" src="img/4.jpg"></a>
<a class="item overlay"><img data-num="5" src="img/5.jpg"></a>

---

我决定用“jarchuleta”的de-response更改JS，但我必须在图像上单击两次才能看到更改

可以通过以下方式解决：

$('.overlay > img').on('click', function(event){
var $this = $(this);
var num = $this.attr("data-num");
var clickist = $this.attr("src");
var confirmed = "img/"+num+".jpg";
if(clickist === confirmed){
  $this.attr("src","img/"+num+"-overlay.jpg");
} else{
  $this.attr("src","img/"+num+".jpg");
}

---

它工作得很好。

它工作得很好，但我必须在图像上单击两次才能看到更改，我不知道为什么。是因为他们在单击类之后才单击它吗？我想是的，我会再试一次。但是用上面的另一个代码解决——我已经将“clicked”类添加到所有图像中，效果很好。谢谢

$('.overlay > img').on('click', function(event){
var $this = $(this);
var num = $this.attr("data-num");
if($this.hasClass('clicked')){
  $this.attr("src","img/"+num+"-overlay.jpg").removeClass('clicked');
} else{
  $this.attr("src","img/"+num+".jpg").addClass('clicked');
}

$('.overlay > img').on('click', function(event){
var $this = $(this);
var num = $this.attr("data-num");
var clickist = $this.attr("src");
var confirmed = "img/"+num+".jpg";
if(clickist === confirmed){
  $this.attr("src","img/"+num+"-overlay.jpg");
} else{
  $this.attr("src","img/"+num+".jpg");
}