質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

398閲覧

jQuery 関数 処理をまとめたい

fufutt_28324

総合スコア4

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/06/07 07:39

日付のプルダウンが3列並んでいる画面を作っています。

下のコードは3つの共通の処理です。
"aaa"の部分はそれぞれ違うIDが入っています。

この処理をIDを変えて3回分書いているのをまとめたいのですがどのような書き方をしたらいいかわかりません。
ご教授してくださると幸いです。

var time = new Date(); var year = time.getFullYear(); var month = time.getMonth(); var date = time.getDate(); function day_hyouji(get_date) { var selected_year = $('#nen').val(); var selected_month = $('#aaa_tsuki').val(); if (selected_month == 2) { if ((Math.floor(selected_year % 4 == 0)) && (Math.floor(selected_year % 100 != 0)) || (Math.floor(selected_year % 400 == 0))) { last_date = 29; } else { last_date = 28; } } else if (selected_month == 4 || selected_month == 6 || selected_month == 9 || selected_month == 11) { last_date = 30; } else { last_date = 31; } $('#aaa_hi').children('option').remove(); $('#aaa_hi').append('<option value="' + +'"></option>'); for (var m = 1; m <= last_date; m++) { if (m == get_date) { $('#aaa_hi').append('<option value="' + m + '" selected>' + m + '</option>'); } else { $('#aaa_hi').append('<option value="' + m + '">' + m + '</option>'); } } } function youbi_hyouji() { var t = $('#aaa_tsuki').val(); var h = $('#aaa_hi').val(); var y = $('#nen').val(); let date = new Date(`${y}-${t}-${h}`); let week_japanese = ["日", "月", "火", "水", "木", "金", "土"]; let week = week_japanese[date.getDay()]; $('#aaa_youbi').text(`${week}`); } $('#nen,#naaai_tsuki').change(function () { var h = $('#aaa_hi').val(); youbi_hyouji(); day_hyouji(h); }); $('#aaa_hi').change(function () { youbi_hyouji(); }); $('#nen,#aaa_tsuki').ready(function () { var h = "<%= @xxx %>" day_hyouji(h); }); $('#aaa_tsuki,#aaa_hi').ready(function () { youbi_hyouji(); }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2022/06/07 08:54

とりあえず動作が確認できません。HTMLも表示したほうがよいでしょう
guest

回答3

0

年、月を選ぶと日が増減して、その日の曜日が表示される
そのブロックが3つ存在する・・・みたいなかんじですかね?

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 document.addEventListener('change',e=>{ 4 const t=e.target; 5 if(t.matches('[name]')){ 6 const y=t.closest('div').querySelector('[name=y]'); 7 const m=t.closest('div').querySelector('[name=m]'); 8 const d=t.closest('div').querySelector('[name=d]'); 9 const w=t.closest('div').querySelector('.youbi'); 10 if(t.matches('[name=y],[name=m]')){ 11 d.querySelectorAll('[value="29"],[value="30"],[value="31"]').forEach(x=>x.remove()); 12 const lastday=new Date(y.value,m.value,0).getDate(); 13 Array(lastday-28).fill(null).map((_,x)=>x+29).forEach(i=>{ 14 d.insertAdjacentHTML('beforeend',`<option value="${i}">${i}</option>`); 15 }); 16 } 17 const today=new Date(y.value,m.value-1,d.value).getDay(); 18 w.textContent="日月火水木金土"[today]; 19 } 20 }); 21 document.querySelectorAll('[name=d]').forEach(x=>{ 22 Array(28).fill(null).map((_,x)=>x+1).forEach(i=>{ 23 x.insertAdjacentHTML('beforeend',`<option value="${i}">${i}</option>`); 24 }); 25 }); 26 document.querySelectorAll('[name=m]').forEach(x=>{ 27 Array(12).fill(null).map((_,x)=>x+1).forEach(i=>{ 28 x.insertAdjacentHTML('beforeend',`<option value="${i}">${i}</option>`); 29 }); 30 const e = new CustomEvent("HTMLEvents"); 31 e.initEvent('change', true, true ); 32 x.dispatchEvent(e); 33 }); 34}); 35</script> 36<div> 37<select name="y"> 38<option value="2022">2022</option> 39<option value="2021">2021</option> 40<option value="2020">2020</option> 41</select> 42<select name="m"> 43</select> 44<select name="d"> 45</select> 46<span class="youbi"></span> 47</div> 48<div> 49<select name="y"> 50<option value="2022">2022</option> 51<option value="2021">2021</option> 52<option value="2020">2020</option> 53</select> 54<select name="m"> 55</select> 56<select name="d"> 57</select> 58<span class="youbi"></span> 59</div> 60<div> 61<select name="y"> 62<option value="2022">2022</option> 63<option value="2021">2021</option> 64<option value="2020">2020</option> 65</select> 66<select name="m"> 67</select> 68<select name="d"> 69</select> 70<span class="youbi"></span> 71</div>

投稿2022/06/07 11:00

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

エスパーするとこういう事をされたいのではないでしょうか?

$("#"+code+"_tsuki").val();

そしてまさにこれはできます。

試してませんし雑ですみませんが、こんな感じで動くんじゃないでしょうか

function aaa_day_hyouji(){ day_hyouji(get_date,'aaa'); } function day_hyouji(get_date,code) { var selected_year = $('#nen').val(); var selected_month = $('#'+code+'_tsuki').val(); //略 }

投稿2022/06/07 10:19

hirohiro

総合スコア2068

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

idではなくclassを使うのはどうでしょうか?
例えば、

javascript

1function youbi_hyouji() { 2 var h = $('#aaa_hi').val(); 3 // 略 4} 5 6$('#aaa_hi').change(function () { 7 youbi_hyouji(); 8});

javascript

1function youbi_hyouji(hi) { 2 var h = hi.val(); 3 // 略 4} 5 6$('.hi').change(function () { 7 youbi_hyouji($(this)); 8});

で、3列のプルダウンのすべての「日」にhiclassを振っておけば、
どの「日」を変更した場合でもこの処理が走ります。

投稿2022/06/07 09:19

nae_stage

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問