指定の一行テキストボックス内に数字が入力されると、隠していた内容を表示したい。

前提・実現したいこと

発生している問題・エラーメッセージ

動作自体はしたものの、hoge01を入力するとhoge02で非表示にしていたところも表示されてしまいます。

該当のソースコード

html
1<input name="hoge01" type="text" class="input-change">枚
2<div class="input-show"><p>入力されたら表示入力されたら表示入力されたら表示</p></div>
3<input name="hoge02" type="text" class="input-change">枚
4<div class="input-show"><p>入力されたら表示入力されたら表示入力されたら表示</p></div>

css
1.input-show{
2	display:none;
3}

js
1$(function(){
2if ($(".input-change").val().length == 0) {
3$(".input-show").css({"display":"none"});
4}
5$(".input-change").on("keydown keyup keypress change", function() {
6if ($(this).val().length < 1) {
7$(".input-show").css({"display":"none"});
8} else {
9$(".input-show").css({"display":"block"});
10}
11});
12});

試したこと

共通のクラス指定ではなく、name="hoge01"、"hoge02"個別にクラス指定をすれば動作しますが、一つのクラス指定・javaScriptの命令で各項目個別に動作させるにはどのような記述にすればいいか、ご助言いただけると幸いです。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答2件

JavaScript を使わないで CSS で実現出来るのではないでしょうか。

html
1<input name="hoge01" type="text" class="input-change" value="">
2<div class="input-show"><p>入力されたら表示入力されたら表示入力されたら表示</p></div>

css
1.input-change[value=""] + .input-show {
2  display: none;
3}

投稿2018/06/26 12:47

yhg

総合スコア2161

kei344

2018/06/27 02:51

属性セレクタはvalueの変化に追随しませんよ。 https://jsfiddle.net/u5xtbqzh/

hnmk

2018/06/27 03:06

ご回答ありがとうございます！こちらの表記で試したところ、入力内容によってCSSが変化する事ができませんでしたので、別の方の回答をベストアンサーに選ばせていただきました。今回ご回答いただいたセレクタ指定方法は今後も参考にさせていただきます！

yhg

2018/06/27 05:38

そうなんですね。勉強になります。調べてみたところ required 属性をつけた上で :valid や :invalid 疑似要素を使うなど工夫が必要みたいです。

行動規範の内容に同意します

ベストアンサー

このような感じではどうでしょうか?

考え方としてはイベント発生したinputの次の要素について表示・非表示を行います。
Jqueryであれば表示/非表示の制御(display)は hide() show()が使用できます。
あくまでも HTML側を触らない前提で行いましたが next()で特定するのはちょっと不安定な気がします。

js
1$(function() {
2  $(".input-change").on("keydown keyup keypress change", function() {
3  if ($(this).val().length < 1) {
4      $(this).next().hide();
5    } else {
6      $(this).next().show();
7    }
8  });
9});