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

}); 

而且我说的是，当你在错误首页页面并导航到Shop页面，您会注意到插件的第二个实例未激活，因为项目应该只有8个（如果屏幕宽度超过1224px），您应该能够通过键盘左右箭头浏览，但你不能。

但是，如果您在Shop页面，点击刷新，插件现在将在页面加载后激活。

所以，我想要一些帮助，跟踪错误，因为我仍然在学习JavaScript，而且我对它不是很有经验。

Answer 1

根据jPages源文件发生这种情况，因为在秒插件初始化插件找不到:visible元件，因为它们是由第一插件初始化^（线60）隐藏：

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

要使用jPages插件加载您的店铺模块，您需要在显示店铺商品后初始化该插件。要做到这一点，你需要在initiate_cluster函数修改callback值：

让我们说店页索引是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); 
}; 

而且从Cluster类的构造函数删除this.inititate_shop();函数调用。

这应该工作。

或者你可以尝试换插件调用，但我不知道：

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