Javascript 循环使用同一类的html元素并查找元素的顺序

我已经创建了一个图像滑块，它有3个图像和3个点，每个点运行一个加载图像的函数，第一个点第一个图像等等

现在我要问的是，我如何为javascript创建一个循环来执行相同的结果，而不是为每个按钮重复我自己的操作

<span class="kcslider-dot" id="dot-1"></span> 
<span class="kcslider-dot" id="dot-2"></span> 
<span class="kcslider-dot" id="dot-3"></span> 

$("#dot-1").click(function(){
  currentSlide(1);
})

$("#dot-2").click(function(){
  currentSlide(2);
})

$("#dot-3").click(function(){
  currentSlide(3);
})

$（“#点-1”）。单击（函数（）{
当前幻灯片（1）；
})
$（“#点-2”）。单击（函数（）{
当前幻灯片（2）；
})
$（“#点-3”）。单击（函数（）{
当前幻灯片（3）；
})

您可以使用

[id^='dot-']

选择器选择所有具有

id

值且以

dot-

开头的元素，然后在单击函数中通过对

id

值执行

split（）

来获取连字符后的数字部分：

使用

jQuery

$（“[id^='dot-']”）。单击（函数（）{
var idNumber=this.id.split（'-'）[1]；
当前幻灯片（idNumber）；
});
函数currentSlide（num）{
console.log（num）；
}

1.
2.
3

您应该在jquery的选择器中使用您的类，然后使用函数“each”循环。您可以使用充当计数器的变量，或者在html中使用属性来获取函数“currentSlide”的参数

您可以使用jQuery的

.each（）

，它将

索引作为参数。然后您只需将
索引
传递给
currentSlide（）
到单击的上下文中即可

$('.kcslider-dot').each(function(index) {
   $(this).click(function() {
        currentSlide(index + 1);
   })
})

另一个选择是使用


$（“.kc滑块点”）。单击（函数（）{
var slideId=$（this）.data（'slide-id'）；
当前幻灯片（slided）；
});
只要您的所有幻灯片属于同一类别，您就可以使用
类别
-选择器而不是
id
。选择所有幻灯片时，选择的输出将是一个数组，其顺序与DOM中的顺序相同。因此，在选择之后，您可以循环遍历该数组，并使用
索引将侦听器分别添加到每个元素中，指定特定的幻灯片：

let sliders = $(".kcslider-dot");
for(let i = 0; i < sliders.length; i++) {
    sliders[i].click( () => {
        currentSlide(i+1);
    })
}

let sliders=$（“.kc滑块点”）；
for（设i=0；i{
电流滑动（i+1）；
})
}

干杯。
如果
span
元素是其父元素的唯一子元素，则可以使用jQuery函数加载相应的图像

您还可以将click事件附加到类而不是id。这样，您只需要一个事件处理程序

e、 g


函数当前幻灯片（索引）{
控制台日志（索引）；
}
$（“.kc滑块点”）。单击（函数（）{
当前幻灯片（$（this）.index（）+1）；
});
.kc滑块点{
显示：内联块；
宽度：15px；
高度：15px；
背景：红色；
}


<span class="kcslider-dot" data-slide-id="1" id="dot-1"></span>
<span class="kcslider-dot" data-slide-id="2" id="dot-2"></span>
<span class="kcslider-dot" data-slide-id="3" id="dot-3"></span>

$(".kcslider-dot").click(function(){
  var slideId = $(this).data('slide-id');

  currentSlide(slideId);
});

let sliders = $(".kcslider-dot");
for(let i = 0; i < sliders.length; i++) {
    sliders[i].click( () => {
        currentSlide(i+1);
    })
}