Javascript在一个页面上不起作用,而它在另一个页面上工作
Javascript not working on one page when it works on other page
主页上的一切都很好:http://kikidesign.net/dev/mcdowell/,尤其是商店部分和底部页脚的营业时间。但是,当我去 http://kikidesign.net/dev/mcdowell/stores/时,商店没有加载。这意味着此存储的 javascript 未加载。但是当我检查控制台日志时,它显示javascript文件在那里,我发现当我取出另一个javascript文件(开放时间.js)时,它加载正常,但是当我把它放回去时,存储没有加载。我不明白为什么两个文件在主页上都运行良好,但在商店页面上却没有。我该如何解决?我什至将两个文件组合在一起,它在主页上加载正常,但在商店页面上加载不然。此外,商店部分还有jquery.mixitup.min.js的混合插件。
存储文件jquery-custom-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 );
控制台会给你代码的错误:
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。但是,在元素是否存在以避免这些错误之前检查始终是一个好主意。:)
您正在尝试设置不存在的 DOM 元素的属性。
212路: document.getElementById("hours").innerHTML = todaysHours;
您可以通过按 F12 来检查浏览器的控制台是否存在此类错误。
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 我的shareService在angular 2中发送值工作正常,但当我渲染我的另一个组件时,会获得默认值
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 当单元格内容由于forumula从另一个工作表编译数据而更改时发送电子邮件
- jQuery点击()事件在另一个点击()中获胜'我不能在手机上工作
- 在页面中使用了两次多个图像上传,但第一个正在工作,另一个不起作用
- 将搜索按钮从一个站点复制到另一个站点:此搜索按钮如何工作,以及如何重现其操作
- 另一个 ng-click() 未按预期工作
- 一个对象怎么能像返回自身和另一个对象一样工作
- 另一个按钮内的按钮不会;不能在Firefox(Angular Material)中工作
- 由于另一个干扰函数,Javascript函数无法正常工作
- 将数据从一个工作表复制到另一个工作表;使用目标工作表中的复制数据创建一个表
- 即使我从另一个工作小提琴复制代码,JSFiddle 也不起作用
- 根据条件将行从一个工作表复制到另一个工作表
- 如何在不移动过滤功能的情况下将一组过滤后的数据移动到另一个工作表
- 将2D数组复制到另一个工作表
- 如何编写一个脚本,清除所需工作表(其名称在另一个工作表的单元格中指定)的(所有)内容
- 复制&在复制到另一个工作表时,修改每个表单提交的特定值
- 在Google Sheets中按列名从一个工作表提取单元格值到另一个工作表
- 将行有条件地复制到另一个工作表,并在行更新后删除它们