Глобальная переменная проблема

Question

У меня есть эта глобальная функция, которую я написал:

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

Я пытаюсь позвонить, используя следующее:

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

});

Это не работает. Есть идеи, что я делаю не так? Спасибо,

Answer 1

Помещение функции внутри $ () является сокращением для document.ready (). ProdCarousel определяется в области действия анонимной функции - просто переместите его за пределы этого.

Answer 2

Понятия не имею, если это единственная проблема, но эта строка:

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

- это асинхронный вызов. Начинается загрузка контента в div продукта. Но позже в том же потоке выполнения вы вызываете prodCarousel для этого div, и мне кажется, что вы ожидаете, что контент уже будет там. Скорее всего, там еще не будет.

Вам, вероятно, придется использовать функцию завершения при вызове загрузки и выполнять обработку этого контента после его успешной загрузки следующим образом.

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