javascript - 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元素将按indexfrom 0to组织19（对于 20 个按钮）。
比去抓住.index()点击的按钮并将其发送到.superSlider( THAT INDEX!! ).
要为滑块设置动画，您可以将检索到的索引乘以 one-slide-width：

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