循环使用相同类的html元素并查找元素的顺序。

Question

我创建了一个图像滑块，它有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);
})

Answer 1

另一种选择是使用jQuery数据

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

Answer 2

您可以使用[id^='dot-']选择器选择以dot-开头的具有id值的所有元素，然后在单击函数内对id值执行split()操作，在连字符后获取数字部分：

使用jQuery的

$("[id^='dot-']").click(function(){
  var idNumber = this.id.split('-')[1];
  currentSlide(idNumber);
});
function currentSlide(num){
   console.log(num);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="kcslider-dot" id="dot-1">1</span> 
<span class="kcslider-dot" id="dot-2">2</span> 
<span class="kcslider-dot" id="dot-3">3</span>

​

使用JavaScript的

var elem = document.querySelectorAll("[id^='dot-']");
for(var i=0; i<elem.length; i++){
  elem[i].addEventListener('click', function(){
     var idNumber = this.id.split('-')[1];
     currentSlide(idNumber);
  });
}

function currentSlide(num){
   console.log(num);
}

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

​

Answer 3

您应该在jquery的选择器中使用类，然后使用函数"each“循环。您可以使用充当计数器o的var，在html中使用属性获取函数"currentSlide“的参数。

var i = 1
$('span.kcslider-dot').each(function(){
     currentSlide(i);
     i++;
})