• 文字サイズ
  • 小
  • 中
  • 大


解決済

jqueryが動きません

  • 相談者：非公開
  • 2021/06/23 17:18
●やりたいこと
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/SHOP-URL/indextest4.html）
…………………………………………………………………………
<script>

module.exports = {
data: function() {
return {
images: [],
slider: null
}
},
mounted: function() {
var that = this;
setTimeout(function() {
//that.images.push({imgsrc:'https://shopping.geocities.jp/SHOP-URL/img2020/bn620/620_r_5sunday.jpg'});

/*福袋*///that.images.push({imgsrc:'https://shopping.geocities.jp/SHOP-URL/img2020/bn620/620_fukubukuro.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html?p=%E7%A6%8F%E8%A2%8B#CentSrchFilter1'});
　　　　/*NEW喪服・礼服*/that.images.push({imgsrc:'https://shopping.c.yimg.jp/lib/SHOP-URL/newblack.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.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/SHOP-URL/summersuits.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.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/SHOP-URL/21ss_setup.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.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/SHOP-URL/homeraretops.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.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/SHOP-URL/img2020/bn620/620_suit.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html'});
/*事務服*/that.images.push({imgsrc:'https://shopping.geocities.jp/SHOP-URL/img2020/bn620/620_vestsuit.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html'});

/*パーティドレス*/that.images.push({imgsrc:'https://shopping.geocities.jp/SHOP-URL/img2020/bn620/620_party.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html'});
/*スモール*/that.images.push({imgsrc:'https://shopping.geocities.jp/SHOP-URL/img2020/bn620/620_small.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.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/SHOP-URL/slb_3set_haru.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.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/SHOP-URL/cabinet/06835980/slb_jacket_aki2.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html'});
//that.images.push({imgsrc:'https://image.rakuten.co.jp/SHOP-URL/cabinet/06835980/slb_skirtsuit_aki.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.html'});
/*春シャツ・ブラウス*///that.images.push({imgsrc:'https://shopping.c.yimg.jp/lib/SHOP-URL/slb_shirt_haru.jpg',url:'https://store.shopping.yahoo.co.jp/SHOP-URL/ITEM-URL.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);


</script>

…………………………………………………………………………


indexに記述分
（https://shopping.geocities.jp/SHOP-URL/indextest5.html）
…………………………………………………………………………
<script>
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);
</script>
…………………………………………………………………………
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
セミナー詳細はこちら
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
ご視聴はこちら

  • 返信者：非公開
  • 2021/06/23 20:14
ECマスターズの田中です。

header別ファイルのscriptタグは、
普通のscriptタグとは異なる構造となっており、
その箇所にコードを記載し………（省略）………
  • 返信者：非公開（質問者）
  • 2021/06/25 11:38
早速のご回答ありがとうございます。
無事表示されました。

1点質問です。
…………………………………………
$(document).ready(fu………（省略）………
  • 返信者：非公開
  • 2021/06/25 16:34
ECマスターズの田中です。

> limitedBnrFx();
> は残したままで問題ありませんでしょうか？

はい、残したままで問題ございません。………（省略）………
  • 返信者：非公開（質問者）
  • 2021/06/28 16:32
ECマスターズの田中さま

わかりやすく説明いただきありがとうございました！
大変助かりました。………（省略）………
このフォーラムへの質問は終了しました
質問を検索する
返信も検索対象にする

カテゴリーから探す