Question

Here is the unedited script:

// for each slide create a list item and link
control.children().each(function(){
    $('.' + option.paginationClass, elem).append('<li><a href="#'+ number +'">'+ (number+1) +'</a></li>');
    number++;
});

This is part of a pagination script. This exert of the script appends markup to each of my slide links within a slideshow, starting with making the first link labeled ‘1’ and adds 1 to each additional slide link; thus, creating a set of navigational links to control the slides. I have four slides so the list of links looks like: ‘1 2 3 4’… I’m sure you already know what “pagination” is…

How can I do this: I want to be able to edit the above script to output particular, specific markup upon each slide link append (Instead ‘1 2 3 4’). Below is my edit version of the script with some pseudo code mixed in. You can read it to get a better idea.

Here is my attempt at customizing EACH individual link:

// for each slide create a list item and link
control.children().each(function(){

     if (number = 1) {LABEL = 'Link for slide 1 blah'}
     if (number = 2) {LABEL = 'Lnk for slide 2 boo'}
     if (number = 3) {LABEL = 'Link fore slide 3 foo'}
     if (number = 4) {LABEL = 'Linkage fo slide 4 yoooou'}

     $('.' + option.paginationClass, elem).append('<li><a href="#'+ number +'">'+ (LABEL) +'</a></li>');
     number++;
});

This is a tricky question to ask without a visual demo but someone with great JavaScript/jQuery skills surely can see what is missing or what line(s) need(s) to be added. This will help a ton of UI / UX developers that want an easier way of customizing their pagination links for basic navigation or even slideshows. Thanks in advance!

Answer 1

Well, you are setting the values instead of comparing them, so all of your if statements are true, change:

 if (number = 1) {LABEL = 'Link for slide 1 blah'}

To:

 if (number === 1) {LABEL = 'Link for slide 1 blah'}

Note that the first parameter of each function is index so using ++ operator is not necessary.

control.children().each(function(number){

You can also define an array:

var labels = [
    'The First Label',
    'Second One',
    '...'
];

and code:

 $('.' + option.paginationClass, elem)
   .append('<li><a href="#'+ number +'">'+ labels[number] +'</a></li>');