主页上的一切正常：http://kikidesign.net/dev/mcdowell/，特别是商店部分和底部页脚的开放时间。但是，当我去http://kikidesign.net/dev/mcdowell/stores/时，商店没有加载。这意味着这个商店的javascript没有加载。但是当我检查控制台日志时，它显示javascript文件在那里，我发现当我取出其他javascript文件（开放时间.js）时，它加载正常但是当我把它放回去时，商店没有加载。我不明白为什么两个文件在主页上工作正常但在商店页面上没有。我如何解决它？我甚至将两个文件组合在一起，它在主页上加载正常，但在商店页面上却没有。另外，stores部分有mixitup插件和jquery.mixitup.min.js。
存储文件 jQuery的定制scripts.js中
( function( $ ) {
$( document ).ready(function() {
var dropdownFilter = {
// Declare any variables we will need as properties of the object
$filters: null,
$reset: null,
groups: [],
outputArray: [],
outputString: '',
// The "init" method will run on document ready and cache any jQuery objects we will need.
init: function(){
var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "dropdownFilter" object so that we can share methods and properties between all parts of the object.
self.$filters = $('#Filters');
self.$reset = $('#Reset');
self.$container = $('#isotope-list');
self.$filters.find('fieldset').each(function(){
var $this = $(this);
self.groups.push({
$buttons : $this.find('.filter'),
$inputsSelect : $this.find('select'),
$inputsText : $this.find('input[type="text"]'),
active : ''
});
});
self.bindHandlers();
},
// The "bindHandlers" method will listen for whenever a select is changed.
bindHandlers: function(){
var self = this;
// Handle select change
self.$filters.on('click', '.filter', function(e){
e.preventDefault();
var $button = $(this);
// If the button is active, remove the active class, else make active and deactivate others.
$button.hasClass('active2') ?
$button.removeClass('active2') :
$button.addClass('active2').siblings('.filter').removeClass('active2');
self.parseFilters();
});
// Handle dropdown change
self.$filters.on('change', function(){
self.parseFilters();
});
// Handle key up on inputs
self.$filters.on('keyup', 'input[type="text"]', function() {
var $input = $(this);
console.log($input.val());
$input.attr('data-filter', '[class*="'+$input.val().replace(/ /, '-')+'"]');
if ($input.val() == '')
$input.attr('data-filter', '');
console.log($input.attr('data-filter'));
self.parseFilters();
});
// Handle reset click
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters.find('.filter').removeClass('active2');
self.$filters.find('.show-all').addClass('active2');
self.$filters.find('select').val('');
self.$filters.find('input[type="text"]').val('').attr('data-filter', '');
self.parseFilters();
});
},
// The parseFilters method pulls the value of each active select option
parseFilters: function(){
var self = this;
// loop through each filter group and grap the value from each one.
for(var i = 0, group; group = self.groups[i]; i++){
var activeButtons = group.$buttons.length ? group.$buttons.filter('.active2').attr('data-filter') || '' : '';
var activeSelect = group.$inputsSelect.length ? group.$inputsSelect.val() || '' : '';
var activeText = group.$inputsText.length ? group.$inputsText.attr('data-filter') : '';
group.active = activeButtons+activeSelect+activeText;
console.log(group.active);
}
self.concatenate();
},
// The "concatenate" method will crawl through each group, concatenating filters as desired:
concatenate: function(){
var self = this;
self.outputString = ''; // Reset output string
for(var i = 0, group; group = self.groups[i]; i++){
self.outputString += group.active;
}
// If the output string is empty, show all rather than none:
!self.outputString.length && (self.outputString = 'all');
console.log(self.outputString);
// ^ we can check the console here to take a look at the filter string that is produced
// Send the output string to MixItUp via the 'filter' method:
if(self.$container.mixItUp('isLoaded')){
self.$container.mixItUp('filter', self.outputString);
}
}
};
// On document ready, initialise our code.
$(function(){
// Initialize dropdownFilter code
dropdownFilter.init();
// Instantiate MixItUp
$('#isotope-list').mixItUp({
controls: {
enable: false // we won't be needing these
},
callbacks: {
onMixFail: function(){
alert('No items were found matching the selected filters.');
}
}
});
});
$('.btn-clear').on('click', function(event) {
event.preventDefault();
$(this).prev().val("").change();
});
$('select').change(function() {
if ($(this).val() == "") {
$(this).next().hide('.btn-hide');
} else {
$(this).next().show('.btn-hide');
}
});
});
} )( jQuery );
营业时间js文件
( function( $ ) {
$( document ).ready(function() {
var currentDate = new Date();
var weekday = [];
weekday[0] = "Sunday";
weekday[1] = "Weekday";
weekday[2] = "Weekday";
weekday[3] = "Weekday";
weekday[4] = "Weekday";
weekday[5] = "Weekday";
weekday[6] = "Saturday";
var currentDay = weekday[currentDate.getDay()];
var currentDayID = "#" + currentDay; //gets todays weekday and turns it into id
$(currentDayID).toggleClass("today"); //this works at hightlighting today
});
$( document ).ready(function() {
var dayOfWeek = (new Date).getDay();
var hours = ["Today: 9:00am to 6:00pm", // Sunday
"Today: 8:00am to 9:00pm", // Monday
"Today: 8:00am to 9:00pm", // Tuesday
"Today: 8:00am to 9:00pm", // Wednesday
"Today: 8:00am to 9:00pm", // Thursday
"Today: 8:00am to 9:00pm", // Friday
"Today: 8:00am to 5:00pm"]; // Saturday
var todaysHours = hours[dayOfWeek];
document.getElementById("hours").innerHTML = todaysHours;
});
} )( jQuery );
答案 0 :(得分：1)
您正在尝试设置不存在的DOM元素的属性。
第212行：
document.getElementById("hours").innerHTML = todaysHours;
您可以按F12键查看浏览器控制台是否存在类似错误。
答案 1 :(得分：1)
控制台正在向您提供代码错误：
Uncaught TypeError: Cannot set property 'innerHTML' of null
正如你在第212行尝试做的那样：
document.getElementById("hours").innerHTML = todaysHours;
您确定#hours元素存在吗？我无法在您的HTML中找到它，因此您尝试使用不存在的元素执行某些操作。
你应该这样做以避免这个问题：
var DOMhours = document.getElementById("hours")
if (DOMhours) DOMhours.innerHTML = todaysHours
如果要在加载商店后执行此操作，则应确保已加载商店，并且在加载商店并将其附加到HTML后，请获取#hours元素并放置您想要的innerHTML。但总是最好先检查元素是否存在以避免这些错误。 ：）