###前提・実現したいこと
各HTMLごとに異なる月数のカレンダーが掲載されるページがあり、
それぞれのカレンダーをスライド表示(slick.js使用)する際に、当月のカレンダーを1番目に表示するようにします。
各HTMLにそれぞれベタに下記のスクリプトを記述して、渡すカレンダー月配列を書き換えればやりたいことは実現できています。
ただ、サイト規約によりJSは原則外部ファイル化することが求められており、このままでは通りません。
何月分のカレンダーが掲載されているのか、という情報は複数の運用担当者がHTMLを書き換える際に情報更新することになるので、
処理するJS関数本体は外部化しつつ、各HTMLから渡される掲載月の情報はHTML側に持たせることが出来れば一番良いと思うのですが、具体的なやり方が分かりません。(そもそもできるのかどうかも分かってないのですが…)
###該当のソースコード
JavaScript
1<!-- ※現在はHTML側にベタ書き --> 2<script> 3$(function(){ 4 //掲載カレンダー月 5 var arr = [5,6,7,8,9] //カレンダー掲載月情報を配列で指定 6 7 //初期実行 8 slideHuck01(arr); //引数で関数に渡す 9 10 //リサイズ時実行 11 var timer = false; 12 $(window).resize(function() { 13 if (timer !== false) { 14 clearTimeout(timer); 15 } 16 timer = setTimeout(function() { 17 slideHuck01(arr); //リサイズされた時も同様 18 }, 200); 19 }); 20 21 function slideHuck01(a){ 22 var calArray = []; //受け取った配列を新たな配列に格納(この処理必要??) 23 for(i=0;i<a.length;i++){ 24 calArray[i] = a[i]; 25 } 26 27 var w = $(window).width(); 28 var size = 639; 29 var d = new Date(); 30 var month = d.getMonth()+1; 31 var num = $.inArray(month, calArray); //当月が配列の何番目かを取得 32 33 if (w <= size) { 34 //639px以下の時 35 $(".jy-calendar").slick({ 36 initialSlide: num //当月をスライドの1番目として表示 37 }); 38 $(".jy-calendar .cal").matchHeight({ 39 remove: true 40 }); 41 } else { 42 //640px以上の時 43 $(".jy-calendar").unslick(); //スライド表示を解除 44 $(".jy-calendar .cal").matchHeight(); 45 } 46 } 47}); 48</script>
###試したこと
HTML側に配列を引数に持たせた関数呼び出しのコード(slideHuck01(arr)
)だけ書いて、他は外部ファイルにしてみましたが、受け取り側で引数の内容をconsole.logで確認すると全てundifined
になっていてうまく渡せていないようでした。
(何かトンチンカンなことをやっているかもしれません)
各ページごとの掲載月の配列データをjsonか何かの外部テキストに持たせておくことも考えましたが、
呼び出したページごとに該当の配列データを正しく選択する仕組みをどう作ればよいのか謎だったので頓挫しました。
###教えていただきたいこと
・外部JSの関数に、HTML側から配列データを渡す方法
・もしくは上記のやりたいことを実現するためのもっと上手い方法
・この手のことをやりたい場合に必要となる前提知識の名称(検索キーワードを何にすればいいのか迷うので…)
など
よろしくお願い申し上げます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/03 11:58
2016/09/03 13:50
2016/09/03 14:02