Question

我在识别我正在开发的网站上的错误时遇到了一些麻烦。更具体地说，我在同一页面上使用jPages两次。

该插件的第一个实例用作网站导航，因为它是一个单页网站。一个第二个实例用于浏览一堆产品而不是滚动。

您可以在此处找到我正在建立的网站：。

我还会粘贴所有的JavaScript，因为我现在还不知道bug在哪里以及为什么会这样：

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

});

我正在谈论的错误，当您在主页页面并导航到商店页面时，您会注意到该插件的第二个实例没有t激活，因为项目应该只有8（如果屏幕的宽度超过1224px），你应该能够使用键盘左右箭头浏览，但你不能。

但如果你在购物页面上，请点击刷新，插件现在会在页面加载后激活。

所以，我希望得到一些帮助，跟踪错误，因为我还在学习JavaScript，而且我对它不是很有经验。

Answer 1

根据jPages源文件，这是因为在第二个插件初始化插件无法找到:visible元素，因为它们被隐藏插件初始化^{（第60行）}：

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

要使用jPages插件加载商店模块，您需要在显示商店商品后初始化该插件。为此，您需要修改callback函数中的initiate_cluster值：

假设 Shop 页面索引为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);
    }
});

jQuery插件激活bug

1 个答案: