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

Answer 2

我决定更改 JS，响应为 "jarchuleta"，但我必须在图像上单击两次才能看到更改。

可以解析为：

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

完美运行。

按 jquery 顺序切换轮播中的图像

Toggle images in a carousel in sequence with jquery

html

javascript

jquery

attr

carousel