Question

Am I doing something wrong? Or is there a better way to do this?

This is the code I have:

//Create as many li's as needed
for(var t = 1; t <= pageLimit; t++) {
        if (t <= 9) {
            $('ul.thumb-list').append('<li><p>PAGE ' + t + '</p><img id="' + t + '" src="../jpeg/thumbnails/0' + t + '.jpg" /></li>'); 
        } else if (t >=10) {
            $('ul.thumb-list').append('<li><p>PAGE ' + t + '</p><img id="' + t + '" src="../jpeg/thumbnails/' + t + '.jpg" /></li>'); 
        }



        // for each li that gets click, produce a click function that will get its id               
        $('ul.thumb-list li').each(function() {
                $(this).click(function() {
                    var currId = $(this).attr('id');

                    //Testing to see if it is right
                    alert('currId is: ' + currId);

                    if(currId <=9){
                        $('#page' + currId).empty();
                        $('#page' + currId).append('<img class="touch" src="../jpeg/pages/0' + currId + '.jpg"/>');
                    } else if (currId >=10) {
                        $('#page' + currId).empty();
                        $('#page' + currId).append('<img class="touch" src="../jpeg/pages/' + currId + '.jpg"/>');
                    }


                    jQT.goTo($('#page' + currId), 'slide');
                });
            });

}

My main question is did I set up the click and each function properly.. or should it be another way?

Also my alert won’t show the currId. Is there any reason why?

Answer 1

First off you don’t need the each. You can simply do:

$('ul.thumb-list li').click(function(){
    // function body
});

Second of all, there is no ID on the list items that you are adding to the list. It’s the images that have their IDs set.

I think you want code that works something like:

$('ul.thumb-list li').click(function(){
    var currId = $('img', this).attr('id');
    alert('currId is: ' + currId);

    // rest of your code
});