Help me reduce code repetition in a simple jQuery function

Question

I have built a carousel using the jQuery cycle plugin. I have 4 links that jump to relevent slides. Right now I have a chunk of code for each link. I am trying to create a single multi-purpose function.

   $('#features-slide0').click(function() {  
       $('#features-slides').cycle(0);  
       return false;  
   });

   $('#features-slide1').click(function() {  
       $('#features-slides').cycle(1);  
       return false;  
   });

   $('#features-slide2').click(function() {  
       $('#features-slides').cycle(2);  
       return false;  
   });

   $('#features-slide3').click(function() {  
       $('#features-slides').cycle(3);  
       return false;  
   });

I have a rel value on each link that carries the number of the slide. How can I use that to create a single block of code that takes care of the link jump?

<a id="features-slide0" href="" rel="0">Lorum ipsum dolor sit amet lorum ipsum dolor sit amet.</a>
<a id="features-slide1" href="" rel="1">Lorum ipsum dolor sit amet lorum ipsum dolor sit amet.</a>
<a id="features-slide2" href="" rel="2">Lorum ipsum dolor sit amet lorum ipsum dolor sit amet.</a>
<a id="features-slide3" href="" rel="3">Lorum ipsum dolor sit amet lorum ipsum dolor sit amet.</a>

Answer 1

The jQuery.index() can be used to grab element's index as opposed to the parent element.

$('a[id^=features-slide]').click(function() {  
    $('#features-slides').cycle($(this).index());  
    return false;  
});

Answer 2

for (var i = 4; i--;) {
  $('#features-slide'+i).click(function() {  
    $('#features-slides').cycle(i);  
    return false;  
  });
}

Answer 3

Guessing at your HTML:

// assumes you have links within a features div
$('#features a').click(function() {  
    $('#features-slides').cycle( // call `cycle` with the rel# of clicked item
      parseInt(                  // turn the attribute value into a number
          $(this).attr('rel')    // retrieve the attribute value for clicked item
      )
    );
    return false;  // don't follow the link
});

parseInt() is a builtin JS function. It just turns a string into a number.

Answer 4

function carousel(slides){
    for (int i = 0; i < slides - 1; i++) { 
        $('#features-slide' + i).click(function() {   
            $('#features-slides').cycle(i);   
            return false;   
        });
    }
}

Answer 5

abstraction. create a method with the constants and pass in the variables. thus have a functions something like this...

function cycleFunction(num)
{
 $('#features-slide'+num).cycle(num);
 return false;  
}

Then you can call it from any click event

$('#features-slide1').click(function() {  
       return $('#features-slide1').cycleFunction(1);  
   });

This way you can change the function in only one place and it changes it for all that call on it. Aaaand you can add more 'features-slide's that use it too. You still have to repeat the code to attach it to click events, but I think it is good to have this assignment explicit so that it is more easily readable what you are trying to do :)