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

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

ただいまの
回答率

90.33%

  • JavaScript

    17542questions

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

  • HTML

    9585questions

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

  • CSS

    6208questions

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

値を変えると色が変わる

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 504

Z-TALBO

score 481

<input type='time' name='time' value='DBから取得した値'>


上記のような時間を表示させるパーツがあるとします。
初期値はDBから取得した値としますが、今回は下記のようにしたいと思います。

<?php for($i = 0; $i < $count; $i++) : ?>
<input type='time' name='time[<?=$i?>]' value='<?=h($time[$i])?>'>
<?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などでも考えることなので、なんとなく理解しております。

そこで、、、とりあえず下記のようにコードを書いてみました。

<input type='time' name='time[<?=$i?>]' value='<?=h($time[$i])?>' id='inputTime'>
var oldTime = $('#inputTime').val();
$('#inputTime').change(function(){
  var newTime = $('#inputTime').val();
  if(oldTime === newTime) {
    $('#inputTime').css('background', '#fff');
  } else {
    $('#inputTime').css('background', 'red');
  }
});


とりあえず、一行目に対しては動作しました。
しかし、これでは当然2行目などは動かない状況です。

$('#inputTime').each(function(index) {

});


というのを見つけてはみたものの、やはり一行しか取得できていません。

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

とんでもない凡ミス

そもそも$('input')でということで、、、あっ、、、と思いました。
今回はid='inputTime'としており、idってそもそも一つだけじゃないか!と、、、
そこで、class指定にすることで、普通に全ての行でイベントを発生させることができました。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

 HTMLInputElement#defaultValue

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

 :default 疑似クラス (CSS)

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

Re: Z-TALBO さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/31 23:07

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

    キャンセル

checkベストアンサー

+2

javascriptで、

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

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

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

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

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

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/31 23:07

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

    キャンセル

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/31 23:06

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17542questions

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

  • HTML

    9585questions

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

  • CSS

    6208questions

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