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