jqueryが動きません

Question

●やりたいこと
index.htmlに時間指定でバナーを表示・非表示にしたいです。
更新の関係上、headerの別ファイルにjqueryを記述したいです。

●現象
index.htmlにjqueryを記述すると動きますがheaderの別ファイルに記述するとindexにheaderが読み込まれません。

●構造
index.htmlにheaderと左ナビとfooterが別ファイルが読み込まれています。

上手く動かない理由とどう記述すればよいかご教示いただければと思います。

javascriptは拾ってきて使用する程度の知識です。
お手数おかけいたします。
よろしくお願いいたします。



追加したいjquery
…………………………………………………………………………
(function ($) {
  "use strict";
 
  //時間の取得
  let now = new Date();
 
  let limitedBnrFx = function(){
    let $target = $('body *[class^="limit--"]');
 
    $($target).each(function () {
      let $this = $(this);
      let $className = $this[0].className.split(' ')[0];
      let $classNameSplit = $className.split('--');
 
      //開始日時の取得
      let $st = $classNameSplit[1].split('_');
      let $stYmd = $st[0];
      let $stTime = $st[1].replace(/-/g, ':');
      let $stDate = $stYmd.replace(/-/g, '/') + ' ' + $stTime + ':00';
      let startDay = new Date($stDate);
 
      //終了日時の取得
      let $end = $classNameSplit[2].split('_');
      let $endYmd = $end[0];
      let $endTime = $end[1].replace(/-/g, ':');
      let $endDate = $endYmd.replace(/-/g, '/') + ' ' + $endTime + ':00';
      let endDay = new Date($endDate);
 
      //表示・非表示の設定(設定期間内は表示[show]・それ以外の期間は非表示[hide])
      if ( startDay < now && now < endDay ){
        $this.show();
      }else{
        $this.hide();
      }
    });
 
  };
 
  $(document).ready(function () {
    limitedBnrFx();
  });
 
})(jQuery);

…………………………………………………………………………




header別ファイルに記述分
（https://shopping.geocities.jp/nissen7days/indextest4.html）
…………………………………………………………………………


module.exports = {
      data: function() {
    return {
      images: [],
      slider: null
    }
  },
  mounted: function() {
    var that = this;
    setTimeout(function() {
      //that.images.push({imgsrc:'https://shopping.geocities.jp/nissen7days/img2020/bn620/620_r_5sunday.jpg'});
    
      /*福袋*///that.images.push({imgsrc:'https://shopping.geocities.jp/nissen7days/img2020/bn620/620_fukubukuro.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/search.html?p=%E7%A6%8F%E8%A2%8B#CentSrchFilter1'});
　　　　/*NEW喪服・礼服*/that.images.push({imgsrc:'https://shopping.c.yimg.jp/lib/nissen7days/newblack.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/search.html?p=%E5%96%AA%E6%9C%8D%E3%80%80%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%AB&x=0&y=0&ei=UTF-8&e=1'});
　　　　/*NEWスーツ*/that.images.push({imgsrc:'https://shopping.c.yimg.jp/lib/nissen7days/summersuits.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/search.html?p=%E5%A4%8F%E3%80%80%E3%82%B9%E3%83%BC%E3%83%84&pf=5000&pt=&page=0#CentSrchFilter1'});
	/*カセット服*/that.images.push({imgsrc:'https://shopping.c.yimg.jp/lib/nissen7days/21ss_setup.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/search.html?p=%E3%82%B9%E3%83%BC%E3%83%84%E3%80%80%E5%8D%98%E5%93%81%E3%80%80%E4%B8%8A%E4%B8%8B%E5%88%A5%E5%A3%B2&x=0&y=0&ei=UTF-8&e=1&X=99&page=0#CentSrchFilter1'});
	/*褒められトップス*/that.images.push({imgsrc:'https://shopping.c.yimg.jp/lib/nissen7days/homeraretops.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/search.html?p=%E3%83%AC%E3%83%87%E3%82%A3%E3%83%BC%E3%82%B9%E3%80%80%E3%83%88%E3%83%83%E3%83%97%E3%82%B9&x=0&y=0&ei=UTF-8&e=1&X=99&page=0#CentSrchFilter1'});
	/*スーツ*///that.images.push({imgsrc:'https://shopping.geocities.jp/nissen7days/img2020/bn620/620_suit.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/a5eca5c7a5.html'});
	/*事務服*/that.images.push({imgsrc:'https://shopping.geocities.jp/nissen7days/img2020/bn620/620_vestsuit.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/263bcb9cfbc.html'});
	
	/*パーティドレス*/that.images.push({imgsrc:'https://shopping.geocities.jp/nissen7days/img2020/bn620/620_party.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/ac1ad15b25a.html'});
	/*スモール*/that.images.push({imgsrc:'https://shopping.geocities.jp/nissen7days/img2020/bn620/620_small.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/search.html?p=%E5%B0%8F%E3%81%95%E3%81%84%E3%82%B5%E3%82%A4%E3%82%BA&used=&uIv=on'});
	/*3点セットスーツ*///that.images.push({imgsrc:'https://shopping.c.yimg.jp/lib/nissen7days/slb_3set_haru.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/search.html?p=%E3%82%B9%E3%83%BC%E3%83%84%E3%80%80%EF%BC%93%E7%82%B9%E3%82%BB%E3%83%83%E3%83%88#CentSrchFilter1'});
	//that.images.push({imgsrc:'https://image.rakuten.co.jp/nissen-rla/cabinet/06835980/slb_jacket_aki2.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/zzy4g20d0044.html'});
	//that.images.push({imgsrc:'https://image.rakuten.co.jp/nissen-rla/cabinet/06835980/slb_skirtsuit_aki.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/zzy4g20d0030.html'});
	/*春シャツ・ブラウス*///that.images.push({imgsrc:'https://shopping.c.yimg.jp/lib/nissen7days/slb_shirt_haru.jpg',url:'https://store.shopping.yahoo.co.jp/nissen7days/a5b7a5e3a5.html'});

    }, 300);
  },
 updated: function() {
    $('#top-half-slider').slick({
		autoplay: true,
		autoplaySpeed: 3000,
		infinite: true,
		dots: true,
		arrows: false
		// slidesToShow: 1,
		// slidesToScroll: 1
        });
      }
	}

        (function ($) {
  "use strict";

  //時間の取得
  let now = new Date();

  let limitedBnrFx = function(){
    let $target = $('body *[class^="limit--"]');

    $($target).each(function () {
      let $this = $(this);
      let $className = $this[0].className.split(' ')[0];
      let $classNameSplit = $className.split('--');

      //開始日時の取得
      let $st = $classNameSplit[1].split('_');
      let $stYmd = $st[0];
      let $stTime = $st[1].replace(/-/g, ':');
      let $stDate = $stYmd.replace(/-/g, '/') + ' ' + $stTime + ':00';
      let startDay = new Date($stDate);

      //終了日時の取得
      let $end = $classNameSplit[2].split('_');
      let $endYmd = $end[0];
      let $endTime = $end[1].replace(/-/g, ':');
      let $endDate = $endYmd.replace(/-/g, '/') + ' ' + $endTime + ':00';
      let endDay = new Date($endDate);

      //表示・非表示の設定(設定期間内は表示[show]・それ以外の期間は非表示[hide])
      if ( startDay < now && now < endDay ){
        $this.show();
      }else{
        $this.hide();
      }
    });

  };

  $(document).ready(function () {
    limitedBnrFx();
  });

})(jQuery);




…………………………………………………………………………


indexに記述分
（https://shopping.geocities.jp/nissen7days/indextest5.html）
…………………………………………………………………………

    document.addEventListener( 'DOMContentLoaded', function(){
   var header = new Vue({
		el: '#vue-header',
		components: {'header-component': httpVueLoader('iframe/header-component.vue')}
	})
 
	var side = new Vue({
		el: '#side-contents',
		components: {'side-component': httpVueLoader('iframe/side-component.vue')}
	})
    	var side = new Vue({
		el: '#vue-footer',
		components: {'footer-component': httpVueLoader('iframe/footer-component.vue')}
	})
       },false);
    
    $('#top-slider-area').slick({
		autoplay: true,
		autoplaySpeed: 3000,
		infinite: true,
		dots: true,
		arrows: true,
		slidesToShow: 1,
		slidesToScroll: 1
        
        });

        (function ($) {
  "use strict";
 
  //時間の取得
  let now = new Date();
 
  let limitedBnrFx = function(){
    let $target = $('body *[class^="limit--"]');
 
    $($target).each(function () {
      let $this = $(this);
      let $className = $this[0].className.split(' ')[0];
      let $classNameSplit = $className.split('--');
 
      //開始日時の取得
      let $st = $classNameSplit[1].split('_');
      let $stYmd = $st[0];
      let $stTime = $st[1].replace(/-/g, ':');
      let $stDate = $stYmd.replace(/-/g, '/') + ' ' + $stTime + ':00';
      let startDay = new Date($stDate);
 
      //終了日時の取得
      let $end = $classNameSplit[2].split('_');
      let $endYmd = $end[0];
      let $endTime = $end[1].replace(/-/g, ':');
      let $endDate = $endYmd.replace(/-/g, '/') + ' ' + $endTime + ':00';
      let endDay = new Date($endDate);
 
      //表示・非表示の設定(設定期間内は表示[show]・それ以外の期間は非表示[hide])
      if ( startDay < now && now < endDay ){
        $this.show();
      }else{
        $this.hide();
      }
    });
 
  };
 
  $(document).ready(function () {
    limitedBnrFx();
  });
 
})(jQuery);
    
…………………………………………………………………………

Answer

ECマスターズの田中です。

header別ファイルのscriptタグは、
普通のscriptタグとは異なる構造となっており、
その箇所にコードを記載しても実行されることはございません。
module.exports でデータを渡すだけのタグとなっております。

ページ読み込み後の処理は
mounted: function(){
から始まる関数の中にご記載いただければ結構です。
その際、jQueryのコードの中にも「ページが読み込まれたら」という条件で
動作する仕組みが含まれており、
ページ読み込み後に「ページが読み込まれたら」と待機してしまい、
結局動作しなくなる可能性がございますので、
即時動作するよう修正いただく必要がございます。

具体的な方法ですが、
追加したいjquery
より、
$(document).ready(function(){
と、その2行下の
});
を削除した内容を、

header別ファイルに記述分
の
}, 300);
と
},
の間にご記載いただきますようお願いします。

併せて、
header別ファイルに記述分
の下に追記していただいたjqueryは、削除をお願いします。

Answer

早速のご回答ありがとうございます。
無事表示されました。

1点質問です。
…………………………………………
$(document).ready(function(){
と、その2行下の
});
を削除
…………………………………………

とのことですが

   limitedBnrFx();

は残したままで問題ありませんでしょうか？

元々のコード
…………………………………………
$(document).ready(function () {
limitedBnrFx();
});
…………………………………………

お手数おかけいたします。
よろしくお願いいたします。

Answer

ECマスターズの田中です。

> limitedBnrFx();
> は残したままで問題ありませんでしょうか？

はい、残したままで問題ございません。
この一行で、バナーの表示・非表示処理を実行します。

これを囲む
$(document).ready(function () { と }); が、
「ページが読み込まれたら囲んだ内容を実行する」
という命令になりますので、
先の返信のとおり、即時動作するよう取り外しております。

Answer

ECマスターズの田中さま

わかりやすく説明いただきありがとうございました！
大変助かりました。