開発中の Web サイトでバグを特定するのに苦労しています。具体的には、同じページでjPagesを 2 回使用しています。
プラグインの最初のインスタンスは、1 ページの Web サイトであるため、Web サイトのナビゲーションとして使用されます。2 番目のインスタンスは、スクロールではなく一連の製品を参照するために使用されます。
ここで私が構築しているウェブサイトを見つけることができます:.
バグがどこにあり、なぜそのように動作するのか、今のところわからないので、すべての 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();
});
そして、私が話していたバグは、ホームページにいてショップページに移動すると、プラグインの 2 番目のインスタンスがアクティブにならないことに気付くでしょう。 1224px を超える場合)、キーボードの左右の矢印でブラウズできるはずですが、できません。
ただし、ショップページを表示している場合は、更新をクリックすると、ページの読み込み後にプラグインがアクティブになります。
私はまだ JavaScript を学んでいて、あまり経験がないので、バグを追跡して、それについて助けてほしいと思います。