Javascript在另一页面上无法正常工作

克里斯蒂娜·贝雷斯勒

主页上的所有内容运行正常:http : //kikidesign.net/dev/mcdowell/,尤其是商店部分以及底部页脚的开放时间。但是,当我转到http://kikidesign.net/dev/mcdowell/stores/,商店未加载。这表示此商店的javascript未加载。但是,当我检查控制台日志时,它表明存在javascript文件,并且我发现当取出另一个javascript文件(opening hours.js)时,它可以很好地加载,但是当我放回去时,商店没有不加载。我不明白为什么两个文件在首页上都能正常运行,而在商店页面上却无法正常运行。我如何解决它?我什至将两个文件组合在一起,并且可以在主页上很好地加载,但在商店页面上却不能。另外,stores部分具有带有jquery.mixitup.min.js的mixitup插件。

存储文件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 );
Midudev

控制台给您错误的代码:

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。但始终最好检查一下该元素是否存在以避免这些错误。:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

当我尝试再次在同一页面上调用时,Ajax无法正常工作

来自分类Dev

Django身份验证可在页面上工作,但不能在另一页面上工作

来自分类Dev

在同一页面上发布表单无法在php中工作

来自分类Dev

如果重新加载同一页面,则window.location.replace无法正常工作

来自分类Dev

同一页面中的多个ajax表单无法正常工作

来自分类Dev

同一页面内的锚点无法正常工作

来自分类Dev

单击链接应在同一页面上显示结果。“返回”和“刷新”按钮必须正常工作

来自分类Dev

Bootstrap Modal显示在一个页面上,而不显示在另一页面上?

来自分类Dev

Visual Studio 2010 BreakPoints不在页面上命中,而在另一页面上命中

来自分类Dev

使用.Value在页面上设置范围=在另一页面上的范围

来自分类Dev

重定向回上一页无法正常工作

来自分类Dev

使用javascript访问保存在另一页上的一个页面上的用户输入值

来自分类Dev

MVC Ajax无法正常工作。代替同一页面,在新页面中打开操作

来自分类Dev

仅通过单击另一页面上的图像来转到页面

来自分类Dev

Silverstripe 3:如何从多个页面获取图像以在函数中的另一页面上显示?

来自分类Dev

Silverstripe 3:如何从多个页面获取图像以显示在功能的另一页面上?

来自分类Dev

jQuery克隆表单在同一页面中两次无法正常工作

来自分类Dev

链接到同一页面上的另一个部分

来自分类Dev

在单个页面上处理两个ajax调用以将数据拉入另一页面上的Highcharts

来自分类Dev

在单个页面上处理两个ajax调用以将数据拉入另一页面上的Highcharts

来自分类Dev

PHP多个包括不能在同一页面上工作

来自分类Dev

同一页面上的 JQuery 函数 POST 仅工作两次

来自分类Dev

如何使 2 个相同的开关按钮在同一页面上工作?

来自分类Dev

Javascript代码重定向到同一页面上的一个部门

来自分类Dev

Javascript代码重定向到同一页面上的一个部门

来自分类Dev

多个Google图表无法在同一页面上正确显示

来自分类Dev

无法在同一页面上使用多个jquery更多/更少文本扩展器

来自分类Dev

PHP无法捕获Ajax jQuery在同一页面上发送的$ _POST数据

来自分类Dev

在ChakraUI中使用useDisclosure()无法在同一页面上使用两个模式

Related 相关文章

  1. 1

    当我尝试再次在同一页面上调用时,Ajax无法正常工作

  2. 2

    Django身份验证可在页面上工作,但不能在另一页面上工作

  3. 3

    在同一页面上发布表单无法在php中工作

  4. 4

    如果重新加载同一页面,则window.location.replace无法正常工作

  5. 5

    同一页面中的多个ajax表单无法正常工作

  6. 6

    同一页面内的锚点无法正常工作

  7. 7

    单击链接应在同一页面上显示结果。“返回”和“刷新”按钮必须正常工作

  8. 8

    Bootstrap Modal显示在一个页面上,而不显示在另一页面上?

  9. 9

    Visual Studio 2010 BreakPoints不在页面上命中,而在另一页面上命中

  10. 10

    使用.Value在页面上设置范围=在另一页面上的范围

  11. 11

    重定向回上一页无法正常工作

  12. 12

    使用javascript访问保存在另一页上的一个页面上的用户输入值

  13. 13

    MVC Ajax无法正常工作。代替同一页面,在新页面中打开操作

  14. 14

    仅通过单击另一页面上的图像来转到页面

  15. 15

    Silverstripe 3:如何从多个页面获取图像以在函数中的另一页面上显示?

  16. 16

    Silverstripe 3:如何从多个页面获取图像以显示在功能的另一页面上?

  17. 17

    jQuery克隆表单在同一页面中两次无法正常工作

  18. 18

    链接到同一页面上的另一个部分

  19. 19

    在单个页面上处理两个ajax调用以将数据拉入另一页面上的Highcharts

  20. 20

    在单个页面上处理两个ajax调用以将数据拉入另一页面上的Highcharts

  21. 21

    PHP多个包括不能在同一页面上工作

  22. 22

    同一页面上的 JQuery 函数 POST 仅工作两次

  23. 23

    如何使 2 个相同的开关按钮在同一页面上工作?

  24. 24

    Javascript代码重定向到同一页面上的一个部门

  25. 25

    Javascript代码重定向到同一页面上的一个部门

  26. 26

    多个Google图表无法在同一页面上正确显示

  27. 27

    无法在同一页面上使用多个jquery更多/更少文本扩展器

  28. 28

    PHP无法捕获Ajax jQuery在同一页面上发送的$ _POST数据

  29. 29

    在ChakraUI中使用useDisclosure()无法在同一页面上使用两个模式

热门标签

归档