CODEWITHSUNDEEP
javascriptjqueryincrement
Laurent
Laurent

Reputation: 31

jQuery incrementing classname and function

I am very new to javascript and I'm learning everyday from your community. However, I can't find a clean solution for my current problem.

I have a grid of tiles on the first slide of a slideshow, and I want each one to link to the respective slide. For example the tile with classname "linkSlide3" goes to slide "3". Now I want to avoid repeating the following function which is working at the moment: 

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

I need to increment from 1 to 20, how can I write it nicely please?

Thank you very much for your help! :-)

Upvotes: 3

Views: 181

Answers (3)

Laurent
Laurent

Reputation: 31

This was my first question on this website, and I didn't expect so many detailed answers… so quickly! So thanks to all of you, for your time, skills and kindness!

I followed dfsq answer and it worked fine :-)

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

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206038

Instead of naming your action buttons

.linkSlide1
.linkSlide2
.linkSlide3
.etc...

you can just do

.linkslide

and make sure that there's no other element inside the parent of your buttons, that way your .linkslide elements will be organized by index from 0 to 19 (for 20 buttons).
Than go grab the .index() of the clicked button and send it to .superSlider( THAT INDEX!! ).
To animate your slider than you can just multiply that retrieved index by 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;
}

Explore the jQuery methods I used:

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/

Upvotes: 1

dfsq
dfsq

Reputation: 193261

For such situations I use data attributes to refer corresponding elements:

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

And in HTML you add data-slide attribute to each repeating element:

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

Here is abstract example of how such a binding can work: http://jsfiddle.net/rNvKe/

Upvotes: 5

Related Questions