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

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

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

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

Q&A

解決済

2回答

355閲覧

jQueryでの年計算について

subaru_10

総合スコア11

jQuery

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

0グッド

0クリップ

投稿2017/07/24 13:48

編集2017/07/24 13:55

jQueryでプルダウンの年計算を作っているのですがどうしてもわからないところがあります。

javascript

1$(function() { 2for (var i = 2017; i >= 1900; i--) { 3$(' .year').append('<option value="' + i + '">' + i + '</option>'); 4 } 5for (var i = 1; i <= 12; i++) { 6$(' .month').append('<option value="' + i + '">' + i + '</option>'); 7 } 8for (var i = 1; i <= 31; i++) { 9$(' .day').append('<option value="' + i + '">' + i + '</option>'); 10 } 11$('.year').change(function () { 12 leapYearCheck(); 13 }); 14$('.month').change(function () { 15 leapYearCheck(); 16 }); 17 }); 18 19// うるう年 20function leapYearCheck() { 21$(' .day').empty(); 22var y = $(' .year').val(); 23var m = $(' .month').val(); 24if (2 == m && (0 == y % 400 || (0 == y % 4 && 0 != y % 100))) { 25var last = 29; 26} else { 27var last = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)[m - 1]; 28 } 29for (var i = 1; i <= last; i++) { 30$(' .day').append('<option value="' + i + '">' + i + '</option>'); 31 } 32 }

html

1<?php for ($x = 0; $x < 3; $x++) : ?> 2<tr> 3<td><input type='text' name='num[<?= $x ?>']> 4</td> 5<td id="BOW<?= $x ?>"> 6<select class='year' name='year[<?= $x ?>]'></select> 7<select class='month' name='month[<?= $x ?>]'></select> 8<select class='day' name='day[<?= $x ?>]'></select> 9</td> 10</tr> 11<?php endfor; ?>

これにいまだとclassを指定しているためひとつのところを変えると複数変わってしまいます。
これをIDをテーブルのtdのほうに連番で置いたのでこれを指定したいのですがjQueryのほうでどうやって繰り返し処理をしたらいいのかわからず止まっています。
できるだけ短い文にしたいのですがなにかいい案があるでしょうか?
ちなみにhtmlのほうは上下にしっかりtbodyなどテーブルを作っています

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

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

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

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

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

guest

回答2

0

ベストアンサー

leapYearCheck関数に親要素(今回はtdを親にしてます)を渡して、該当のdayのみを更新すればよいかと。

javascript

1for (var i = 2017; i >= 1900; i--) { 2 $('.year').append('<option value="' + i + '">' + i + '</option>'); 3} 4for (var i = 1; i <= 12; i++) { 5 $(' .month').append('<option value="' + i + '">' + i + '</option>'); 6} 7for (var i = 1; i <= 31; i++) { 8 $(' .day').append('<option value="' + i + '">' + i + '</option>'); 9} 10 11$('.year').change(function () { 12 leapYearCheck($(this).parents('td')); 13}); 14 15$('.month').change(function () { 16 leapYearCheck($(this).parents('td')); 17}); 18 19/* 20// 異なる要素で同じ処理を行う場合、以下のように一つにまとめることも可能です。 21$('td') 22 .on('change', '.year, .month', function () { 23 leapYearCheck($(this).parents('td')); 24 }); 25*/ 26 27// うるう年 28function leapYearCheck($td) { 29 var y = $td.find('.year').val(); 30 var m = $td.find('.month').val(); 31 32 var $d = $td.find('.day'); 33 $d.empty(); 34 35 if (2 == m && (0 == y % 400 || (0 == y % 4 && 0 != y % 100))) { 36 var last = 29; 37 } 38 else { 39 var last = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)[m - 1]; 40 } 41 42 for (var i = 1; i <= last; i++) { 43 $d.append('<option value="' + i + '">' + i + '</option>'); 44 } 45}

https://jsfiddle.net/takmatz/2pco2t6r/

設問とは関係ありませんが、monthの値は「0」スタートではないのですか?

投稿2017/07/24 14:44

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

subaru_10

2017/07/24 14:54

ありがとうございます!できました! monthを0にすると表示も0に変わるかな?と思いelse文のほうをm-1にしました。 0スタートのほうがよいのでしょうか?
退会済みユーザー

退会済みユーザー

2017/07/24 15:00

サーバ側の実装が1月の値は「1」で問題ないのであれば、気にしないでください。
subaru_10

2017/07/24 15:06

あーそうですね、そこまで初心者なので考えが及びませんでしたが確かにサーバー側で0から参照してる可能性があるのですね‥ やはり問い合わせフォームなどは0からのところが多いのですか? 差し支えなければご回答いただければ‥
退会済みユーザー

退会済みユーザー

2017/07/24 22:17

個人的な経験としては1月は「0」を渡していることがほとんどです。 サーバ側も受け取ったデータを「-1」などせず、そのまま扱えるので。 ただし、前コメント通り、サーバ側の実装次第ではありますが。
subaru_10

2017/07/25 02:34

なるほど、0を渡しているところがほとんどなのですね では0に変更し、表示する際には+1し表示したいと思います!
guest

0

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div> 9 <?php for ($i = 0; $i < 3; $i++): ?> 10 <div class="ymd"> 11 <select class="year" name="year[]"> 12 <?php for ($y = 2017; $y > 1900; $y--): ?> 13 <option value="<?php echo $y ?>"><?php echo $y ?></option> 14 <?php endfor; ?> 15 </select> 16 <select class="month" name="month[]"> 17 <?php for ($m = 1; $m <= 12; $m++): ?> 18 <option value="<?php echo $m ?>"><?php echo $m ?></option> 19 <?php endfor; ?> 20 </select> 21 <select class="day" name="day[]"> 22 23 </select> 24 </div> 25 <?php endfor; ?> 26 </div> 27 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 28 <script type="text/javascript"> 29 function getLastDay(y, m) { 30 var date = new Date(y, m + 1, 0); 31 return date.getDate(); 32 } 33 34 $(function () { 35 $('.year, .month').on('change', function () { 36 37 // 選択している年 38 var y = $(this).parent('.ymd').children('.year').val(); 39 40 // 選択している月 41 var m = $(this).parent('.ymd').children('.month').val() - 1; 42 43 // 年月からその月の晦日(最終日)を判定 44 var d = getLastDay(y, m); 45 46 // select.day 47 var select_day = $(this).parent('.ymd').children('.day'); 48 var opt = $('<option>'); 49 opt.prop('value', '').text('----'); 50 51 select_day.empty().append(opt); 52 53 for (var i = 1; i <= d; i++) { 54 var opt = $('<option>'); 55 opt.prop('value', i).text(i); 56 select_day.append(opt); 57 } 58 }); 59 }); 60 </script> 61 </body> 62</html>

投稿2017/07/24 14:43

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

subaru_10

2017/07/24 14:59

ありがとうございます!こちらも親要素のdivにふっているのですね! やはり$(this)を使いこなすようになるのがお二人のものを見ていると大事だとわかりました! ベストアンサーを渡すことができず申し訳ありません また回答していただけるとうれしいです!
退会済みユーザー

退会済みユーザー

2017/07/24 15:04 編集

コードを書いてもらって、「動いた」で終わらずに、回答してもらったコードについて是非「意味・意図」を読み取ろうと考えながら、読んで見てください。きっと、「なぜこんな書き方しているの?」とかそういう疑問が出てくるはずです。
subaru_10

2017/07/24 15:12

はい!しっかりどちらのとこも意味と意図、そして使い方を理解しまた違ったプログラムを作り応用してみたいと思います! 動いて嬉しかったですがわからないとこも多く、まだまだ楽しめそうで自分で作れる半人前になるまで突っ走りたいです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問