HTML
1<input type='time' name='time' value='DBから取得した値'>
上記のような時間を表示させるパーツがあるとします。
初期値はDBから取得した値としますが、今回は下記のようにしたいと思います。
HTML
1<?php for($i = 0; $i < $count; $i++) : ?> 2<input type='time' name='time[<?=$i?>]' value='<?=h($time[$i])?>'> 3<?php endfor; ?>
実際は何行かある想定ですので、取得したデータがどれだけあるかを$countに入れてそれだけ回すようにしました。
取得したデータの表示としては
9:00
10:00
11:00
と表示されたとします。
そこで、修正したい時に
9:00
10:30
11:00
と修正した場合
9:00と11:00は特に変化は無いですが、10:00 -> 10:30のinputは背景の色を変えて、値を動かした(変えた)ことがわかるようにしてみたいのですが、、、
この動作をさせる方法はどのようになるでしょうか?
###質問追記
動きとしては、当然今の値の保持、変更された値の保持、その違いによる変化というのは、PHPなどでも考えることなので、なんとなく理解しております。
そこで、、、とりあえず下記のようにコードを書いてみました。
HTML
1<input type='time' name='time[<?=$i?>]' value='<?=h($time[$i])?>' id='inputTime'>
Javascript
1var oldTime = $('#inputTime').val(); 2$('#inputTime').change(function(){ 3 var newTime = $('#inputTime').val(); 4 if(oldTime === newTime) { 5 $('#inputTime').css('background', '#fff'); 6 } else { 7 $('#inputTime').css('background', 'red'); 8 } 9}); 10
とりあえず、一行目に対しては動作しました。
しかし、これでは当然2行目などは動かない状況です。
Javascript
1$('#inputTime').each(function(index) { 2 3});
というのを見つけてはみたものの、やはり一行しか取得できていません。
何行あるかを調べてその分回すという部分の書き方がどうも、わかっていない状況かと思います。
###とんでもない凡ミス
そもそも$('input')でということで、、、あっ、、、と思いました。
今回はid='inputTime'としており、idってそもそも一つだけじゃないか!と、、、
そこで、class指定にすることで、普通に全ての行でイベントを発生させることができました。
しかし、回答いただいた内容で、知らなかったこともありますので、とても参考になりました!
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/31 14:07