Javascript在一个页面上不起作用,而它在另一个页面上工作

Javascript not working on one page when it works on other page

本文关键字:另一个 工作 不起作用 一个 Javascript      更新时间:2023-09-26

主页上的一切都很好: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 来检查浏览器的控制台是否存在此类错误。

相关文章: