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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

7373閲覧

値を変えると色が変わる

Z-TALBO

総合スコア525

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/03/31 09:09

編集2017/03/31 14:10

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指定にすることで、普通に全ての行でイベントを発生させることができました。

しかし、回答いただいた内容で、知らなかったこともありますので、とても参考になりました!

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

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

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

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

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

guest

回答3

0

HTMLInputElement#defaultValue

change イベントと defaultValue プロパティを活用してみてはいかがでしょうか。

:default 疑似クラス (CSS)

残念ながら、CSS の :default 疑似クラスはinput要素に対応しないようです。

Re: Z-TALBO さん

投稿2017/03/31 12:46

think49

総合スコア18156

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

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

Z-TALBO

2017/03/31 14:07

回答ありがとうございます! 大変参考になります。いろいろ試しながら確認していこうと思います。
guest

0

ベストアンサー

javascriptで、

  1. ページ表示時に各input要素のvalue値を保存しておく
  2. 各input要素のchangeイベント発生時に、保存しておいたvalue値と現在のvalue値に差があるかチェックし、差があれば色を変える、無ければ色を元に戻す

という処理を行えば実現できます。

上の回答だけで実現できないようなら、

  • どのようなコードを書いて試してみたのか
  • 判らない箇所はどこか?
  • 判らない箇所について、どういった調査をしてみたのか

を質問に追記してください。

以下、質問追記を受けての回答

何行あるかを調べてその分回すという部分の書き方がどうも、わかっていない状況かと思います。

jQueryはセレクタで指定した全てに対して設定を行いますので、ループして設定するということをしなくても一括ですべての要素にイベントを設定できます。
イベントで呼び出される関数内ではキーワードthisがイベント発生元の要素を指しますので、以下のようなコードで各コントロールの値が変わっていれば背景が赤になる、という処理が設定できます。

javascript

1$(function() { 2 $("input").change(function() { 3 // すみません。「ページ表示時に各input要素のvalue値を保存しておく」という処理は 4 // defaultValueを利用すれば不要でしたね。 5 $(this).css("background", this.value != this.defaultValue ? "red" : "white"); 6 }); 7});

ちなみにjQueryではこういった事が出来ますが、むしろこんなことが出来るjQueryは特殊な部類なので、質問主さんの「必要な要素についてループしてそれぞれ設定する」という考え方の方向は間違っていません。

投稿2017/03/31 09:27

編集2017/03/31 13:58
ku__ra__ge

総合スコア4524

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

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

Z-TALBO

2017/03/31 14:07

回答ありがとうございます! 最後に追記で解決部分を書きますが、、、 自分の凡ミスもありました。。。回答のお陰でそれに気づくことができました!
guest

0

変更があったinput要素にクラスを付けて表示すればよいのでは?

投稿2017/03/31 09:15

kei344

総合スコア69364

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

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

Z-TALBO

2017/03/31 14:06

回答ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問