Global variable trouble

I have this global function I w开发者_开发技巧rote:

    var aSpecimen = 0;

$(function(){
  function prodCarousel(div){
    $(div).find('li.next a').click(function() {
        $(div).find('ul.display li').hide();
        $(div).find('.viewer ul li.img').siblings().removeClass('viewerOn');
        aSpecimen = aSpecimen + 1;

        if (aSpecimen == $(div).find('ul.display li').length + 0)
            aSpecimen = 0;

        if (aSpecimen == $(div).find('.img').length + 0)
            aSpecimen = 0;

        $(div).find('ul.display li:eq(' + aSpecimen + ')').fadeIn("fast");

        $(div).find('.img:eq(' + aSpecimen + ')').addClass('viewerOn');

        return false;
    });

    $('li.prev a').click(function() {
        $(div).find('ul.display li').hide();
        $(div).find('.viewer ul li.img').siblings().removeClass('viewerOn');
        aSpecimen = aSpecimen - 1;

         if (aSpecimen == -1) aSpecimen = $(div).find('ul.display li').length - 1;

        $(div).find('ul.display li:eq(' + aSpecimen + ')').fadeIn("fast");
        $(div).find('.viewer ul li.img:eq(' + aSpecimen + ')').addClass('viewerOn');
        return false;
    });
  }
});

I am attempting to call it using the following:

    $(document).ready(function() {

      function prodNav(div, self){
        $("#product1, #product2").empty();
        $('#product'+div).load('product'+div+'.html');
        $("ul.prodDetails li a").removeClass("prod1DetailsOn prod2DetailsOn prod3DetailsOn prod4DetailsOn");
        $("ul.prodDetails li.details1 a").addClass('prod'+div+'DetailsOn');
        $("#productsAll nav li a").removeClass("prodMainNav1 prodMainNav2 prodMainNav3 prodMainNav4");
        $(self).addClass('prodMainNav'+div);
        prodCarousel('#product'+div);
      }
    }):

$("#productsAll nav li.prod1 a").click(function(){
  prodNav("1", this);
  return false;
});

$("#productsAll nav li.prod2 a").click(function(){
  prodNav("2", this);
  return false;
});

});

It does not work. Any ideas what I am doing wrong? Thanks,

Putting a function inside $() is shorthand for document.ready(). ProdCarousel is being defined in the scope of an anonymous function - just move it outside of that.

I have no idea if this is the only issue, but this line:

$('#product'+div).load('product'+div+'.html');

is an asynchronous call. It starts the loading of content in the product div. But, later on in the same thread of execution, you call prodCarousel on that div and it looks to me like you expect the content to already be there. It will likely not be there yet.

You will probably have to use a completion function on the load call and do the processing of that content after it has been successfully loaded like this.

$('#product'+div).load('product'+div+'.html', function() {
    // call prodCarousel() on the new content here
});