jQuery递增类名和函数

Question

我是javascript的新手，我每天都在从你的社区学习。 但是，我无法找到解决当前问题的简洁解决方案。

我在幻灯片的第一张幻灯片上有一个瓷砖网格，我希望每个都链接到相应的幻灯片。例如，类名为“linkSlide3”的磁贴将转到“3”。现在我想避免重复以下正在运行的功能：

$('.linkSlide3').click(function() {
    $('.slider').mySuperSlider('goTo', 3);
    return false;
});

我需要从1增加到20，我怎么能写好呢？

非常感谢你的帮助！ ： - ）

Answer 1

对于这种情况，我使用数据属性来引用相应的元素：

$('.linkSlide').click(function() {
    $('.slider').mySuperSlider('goTo', $(this).data('slide'));
    return false;
});

在HTML中，您可以为每个重复元素添加data-slide属性：

<a class="linkSlide" data-slide="3">...</a>

以下是此类绑定如何工作的抽象示例： http://jsfiddle.net/rNvKe/

Answer 2

而不是命名您的操作按钮

  

.linkSlide1
   .linkSlide2
   .linkSlide3
   .etc ...

你可以做到

  

.linkslide

并确保按钮的父级内没有其他元素， 这样，您的.linkslide元素将由index从0组织到19（20个按钮）。
然后抓住点击按钮的.index()并将其发送到.superSlider( THAT INDEX!! )。
要为滑块设置动画，只需将检索到的索引乘以一个幻灯片宽度：

的 LIVE DEMO

<强> jQuery的：

$('.linkSlide, .back').click(function() {
    var ind = $(this).index()+1; // +1 cause we are already at 0
    if($(this).hasClass('back')) ind = 0; // go to slide index 0
    superSlider( ind ); 
});

function superSlider( ind ){
  var oneSlideWidth = $('.slide').width();
  $('#allSlides').stop().animate({left: -(ind*oneSlideWidth) },700);  
}

<强> HTML：

<div id="slider">  
  <div id="allSlides">

    <div class="slide"> <!-- index = 0 -->
        Slide 0
       <button class="linkSlide">Tile index 1</button> <!-- index = 0, add 1-->
       <button class="linkSlide">Tile index 2</button> <!-- index = 1, add 1 -->
       <button class="linkSlide">Tile index 3</button> <!-- index = 2, add 1 -->
    </div>

    <div class="slide"> <!-- index = 1 -->
      Slide 1
      <button class="back">Back to 0</button>      
    </div>

    <div class="slide"> <!-- index = 2 -->
      Slide 2
      <button class="back">Back to 0</button>      
    </div>


    <div class="slide"> <!-- index = 3 -->
      Slide 3
      <button class="back">Back to 0</button>      
    </div>

  </div>
</div>

<强> CSS：

#slider{
  position:relative;
  width:100px;
  height:95px;
  background:#eee;
  text-align:center;
  overflow:hidden;  
}
#allSlides{
  position:absolute;
  left:0;
  width:9999px;
  height:95px;
}

.slide{
  position:relative;
  width:100px;
  height:95px;
  float:left;
}

探索我使用的jQuery方法：

http://api.jquery.com/click/
http://api.jquery.com/index/
http://api.jquery.com/hasclass/
http://api.jquery.com/width/
http://api.jquery.com/stop/
http://api.jquery.com/animate/

Answer 3

这是我在这个网站上的第一个问题，我没想到会有这么多详细答案......所以很快！ 感谢大家，感谢您的时间，技能和善意！

我遵循了dfsq的答案，它运行良好： - ）

HTML：

    <div class="linkSlide" data-slide="1"></div>
    <div class="linkSlide" data-slide="2"></div>
    <div class="linkSlide" data-slide="3"></div>
    etc… until 20

JS：

$('.linkSlide').click(function() {
    $('.slider').mySuperSlide('goTo', $(this).data('slide'));
    return false;
});