Ошибка активации плагина jQuery

Question

У меня возникли проблемы с выявлением ошибки на веб-сайте, который я разрабатываю. Чтобы быть более конкретным, я использую jPages дважды на той же странице.

Первый экземпляр плагина используется в качестве навигации по веб-сайту, поскольку это веб-сайт одной страницы. A второй экземпляр используется для просмотра списка продуктов, а не прокрутки.

Веб-сайт, который я здесь строил: .

Я также вставить все JavaScript, потому что я понятия не имею сейчас, где ошибка и почему ведет себя так:

$(document).ready(function() { 

var default_cluster_options = { 
    environment    : "Development", 
    local_storage_key  : "Cluster", 
    plugin_navigation_class : ".navigation", 
    plugin_wrapper_id  : "content-wrapper", 
    headings    : ['.heading-first h1', '.heading-second h1'], 
    input_types    : ['input', 'textarea'], 
    info_iqns_class   : ".iqn", 
    preview_iqn_class  : ".preview", 
    limits     : [ { min: 1224, items: 8 }, { min: 954, items: 6 }, { min: 624, items: 4 }, { min: 0, items: 2 } ], 
    shop_local_storage_key : "Shop", 
}; 

var default_plugin_options = { 
    containerID : "", 
    first  : false, 
    previous : false, 
    next  : false, 
    last  : false, 
    startPage : 1, 
    perPage  : 1, 
    midRange : 6, 
    startRange : 1, 
    endRange : 1, 
    keyBrowse : false, 
    scrollBrowse: false, 
    pause  : 0, 
    clickStop : true, 
    delay  : 50, 
    direction : "auto", 
    animation : "fadeIn", 
    links  : "title", 
    fallback : 1000, 
    minHeight : true, 
    callback : function(pages, items) {} 
}; 

var Cluster = function(cluster_options, plugin_options) { 

    var self = this; 

    this.options = $.extend({}, default_cluster_options, cluster_options); 

    this.plugin_options = $.extend({}, default_plugin_options, plugin_options); 

    this.environment = this.options.environment; 

    this.data_key = this.options.local_storage_key; 

    this.shop_data_key = this.options.shop_local_storage_key; 

    this.plugin_navigation_class = this.options.plugin_navigation_class; 

    this.plugin_wrapper_id = this.options.plugin_wrapper_id; 

    this.headings = this.options.headings; 

    this.input_types = this.options.input_types; 

    this.viewport = $(window); 

    this.body = $('body'); 

    this.viewport_width = this.viewport.width(); 

    this.viewport_height = this.viewport.height(); 

    this.info_iqns_class = this.body.find(this.options.info_iqns_class); 

    this.preview_iqn_class = this.body.find(this.options.preview_iqn_class); 

    this.limits = this.options.limits; 

    this.current_shop_page = this.options.current_shop_page; 

    this.total_shop_pages = this.options.total_shop_pages; 

    this.initiate_cluster(self.plugin_navigation_class, { 
     containerID : self.plugin_wrapper_id, 
     startPage : +(self.get_local_storage_data(self.data_key) || 1), 
     callback : function(pages){ 
      self.set_local_storage_data(self.data_key, pages.current); 
     } 
    }); 

    this.inititate_shop(); 

    this.initiate_shop_touch_events(); 

}; 

Cluster.prototype.set_environment = function() { 
    if(this.environment == "Development") { 
     less.env = "development"; 
     less.watch(); 
    } 
}; 

Cluster.prototype.set_local_storage_data = function(data_key, data_val) { 
    return localStorage.setItem(data_key, data_val); 
}; 

Cluster.prototype.get_local_storage_data = function(data_key) { 
    return localStorage.getItem(data_key); 
}; 

Cluster.prototype.initiate_scalable_text = function() { 
    for(var i in this.headings) { 
     $(this.headings[i]).fitText(1.6); 
    } 
}; 

Cluster.prototype.initiate_placeholder_support = function() { 
    for(var i in this.input_types) { 
     $(this.input_types[i]).placeholder(); 
    } 
}; 

Cluster.prototype.initiate_iqn_selected_class = function() { 
    if(this.viewport_width < 980) { 
     $(this.info_iqns_class).each(function(index, element) { 
      var iqn = $(element).parent(); 
      $(iqn).on('click', function() { 
       if($(iqn).hasClass('selected')) { 
        $(iqn).removeClass('selected'); 
       } else { 
        $(iqn).addClass('selected'); 
       } 
      }); 
     }); 
    } 
}; 

Cluster.prototype.initiate_preview_action = function() { 
    $(this.preview_iqn_class).each(function(index, element) { 
     var data = $(element).attr('data-image-link'); 
     $(element).on('click', function(ev) { 
      $.lightbox(data, { 
       'modal'   : true, 
       'autoresize' : true 
      }); 
      ev.preventDefault(); 
     }); 
    }); 
}; 

Cluster.prototype.initiate_plugin = function(plugin_navigation, plugin_options) { 
    var options = $.extend({}, this.plugin_options, plugin_options); 
    return $(plugin_navigation).jPages(options); 
}; 

Cluster.prototype.initiate_shop_touch_events = function() { 
    var self = this; 
    return $("#shop-items-wrapper").hammer({prevent_default: true, drag_min_distance: Math.round(this.viewport_width * 0.1)}).bind("drag", function(ev) { 
     var data = JSON.parse(self.get_local_storage_data(self.shop_data_key)); 
     if (ev.direction == "left") { 
      var next_page = parseInt(data.current_page + 1); 
      if(next_page > 0 && next_page <= data.total_pages) { 
       $(".shop-items-navigation").jPages(next_page); 
      } 
     } 
     if(ev.direction == "right") { 
      var prev_page = parseInt(data.current_page - 1); 
      if(prev_page > 0 && prev_page <= data.total_pages) { 
       $(".shop-items-navigation").jPages(prev_page); 
      } 
     } 
    }); 
} 

Cluster.prototype.inititate_shop = function() { 
    var self = this; 
    for(var i = 0; i < this.limits.length; i++) { 
     if(this.viewport_width >= this.limits[i].min) { 
      this.initiate_plugin('.shop-items-navigation', { 
       containerID : "shop-items-wrapper", 
       perPage  : self.limits[i].items, 
       midRange : 8, 
       animation : "fadeIn", 
       links  : "blank", 
       keyBrowse : true, 
       callback : function(pages) { 
        var data = { 
         current_page : pages.current, 
         total_pages : pages.count 
        } 
        self.set_local_storage_data(self.shop_data_key, JSON.stringify(data)); 
       } 
      }); 
      return false; 
     } 
    } 
}; 

Cluster.prototype.initiate_cluster = function(plugin_navigation, plugin_options) { 
    this.set_environment(); 
    this.initiate_scalable_text(); 
    this.initiate_placeholder_support(); 
    this.initiate_iqn_selected_class(); 
    this.initiate_preview_action(); 
    this.initiate_plugin(plugin_navigation, plugin_options); 
}; 

var cluster = new Cluster(); 

}); 

И ошибка я говорил о том, когда вы находитесь на Главная страница и перейти на страницу Магазин вы заметите, что второй экземпляр плагина не активируется, так как элементы должны быть только 8 (если ширина экрана больше 1224px), и вы должны быть возможность просмотра с помощью стрелок влево и вправо, но вы не можете.

Но если вы находитесь на странице Магазин, нажмите обновить и плагин активируется после загрузки страницы.

Итак, я хотел бы помочь с этим, отслеживая ошибку, потому что я все еще изучаю JavaScript, и я не очень разбираюсь в этом.

Answer 1

jPages Согласно исходному файлу это происходит потому, что при второй плагин инициализации плагина не может найти :visible элементы, как они скрыты первый плагин инициализации ^{(строка 60)}:

this._items = this._container.children(":visible"); 

К загрузите модуль вашего магазина с помощью плагина jPages, вам нужно инициализировать этот плагин после показа предметов магазина. Для этого вам необходимо изменить callback значение в initiate_cluster функции:

Допустим, что Магазин индекс страницы 4:

Cluster.prototype.initiate_cluster = function(plugin_navigation, plugin_options) { 
    // ... your code 
    plugin_options.callback = function(pages) { 
     if(pages.current == 4) { 
      this.inititate_shop(); 
     } 
    }; 
    this.initiate_plugin(plugin_navigation, plugin_options); 
}; 

И удалить вызов this.inititate_shop(); функцию от Cluster конструктора класса.

Это должно сработать.

Или вы можете попробовать поменять плагин звонки, но я не уверен:

// first we initiate shop 
this.inititate_shop(); 

// then main site navigation 
this.initiate_cluster(self.plugin_navigation_class, { 
    containerID : self.plugin_wrapper_id, 
    startPage : +(self.get_local_storage_data(self.data_key) || 1), 
    callback : function(pages){ 
     self.set_local_storage_data(self.data_key, pages.current); 
    } 
});