javascript - 使用 jquery 按顺序切换轮播中的图像

Question

我有以下 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代码:

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

这仅适用于单个图像，但我想对轮播中的所有图像执行相同的操作，而无需重复上面相同的 JS 代码。

你有什么建议？

Answer 1

如果给每张图片添加一个属性会怎样

<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>

然后在js中，获取数字，用它来组成文件名。

$('.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');
}