入力フィールドとボタンを作成し、ボタンを押すたびに入力フィールドが表示・非表示を繰り返すようにしたいと思っています。
入力フィールドが表示されているときにはボタンは"hide"、非表示の時は"show"が表示されている仕様です。
<div id="input"><input type="text" name="something"></div>
<input type="button" id="button" value="hide">
以下のようにjQueryを組んでみました。
$(document).ready(function(){
if($("#button").attr("value") == "hide"){
$("#button").click(function(){
alert("VALUE=" + $("#button").attr("value")),
$("#input").children().hide(),
$("#button").attr("value", "show");
});
} else if($("#button").attr("value") == "show"){
$("#button").click(function(){
alert("VALUE=" + $("#button").attr("value")),
$("#input").children().show(),
$("#button").attr("value", "hide");
});
}
});
まず、hideボタンを押すとhideのアラートが出てフィールドが非表示になり、showというボタンのみが残ります。
次にshowボタンを押すと、showのアラートは表示されますが、フィールドが再表示されず、ボタンもshowのままです。
elseのalertまで行っているのにその後が機能しないのは何故でしょうか?
No.2ベストアンサー
- 回答日時:
組んでみたよ。
参考までにどうぞ。$('#button').click(function(){
$(this).val($('#input').children().toggle().is(':visible') ? 'hide':'show');
});
ここまでシンプルにできるよ。
#buttonがクリックされたら
#inputの子要素の表示非表示を切り替えて(toggle())
要素が表示だったらvalueにhide
要素が非表示だったらvalueにshow
こんな動きになってる。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
クリックさせたいが、click()が...
-
if構文
-
マウスをかざすとおこるイベント
-
クリックでテーブル内の背景色...
-
JavaScriptの勉強をしているの...
-
追加ボタンを押した際に ok ボ...
-
javascriptのちょっとした動作...
-
【UWSC】HTML内のある部分を抽...
-
name属性のないformタグの、中...
-
テキストボックスの背景色について
-
VBScriptでpingを実行(ブラウザ...
-
【Javascript】formで取得した...
-
一覧から選択した行の行番号を...
-
xml 読み込みランダムで表示す...
-
フォームのチェックボックスの...
-
読み込み中に「Now Loading」を...
-
複数のプルダウンを1つにまとめ...
-
Javascript DOM?
-
jquery datatablesを使用 イン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
ボタンかリンクをクリックする...
-
javaScriptの変数をJavaの変数...
-
formのfileの値をhiddenでも持...
-
JSのボタンを複数う使うには
-
JavaScriptのfileオブジェクト...
-
innerHTML内では改行は禁止?
-
開いた子ウィンドウにあるボタ...
-
BackSpaceしたい(QNo.2734284の...
-
VB.NETで<Input>タグ、<text...
-
オンクリックで現在時刻の取得→...
-
JQueryでfunctionに引数としてI...
-
複数のテキストボックスの値の...
-
onClickがinput type="image"だ...
-
クリック→テキストボックスに追加
-
Javascriptで'(シングルクォー...
-
テキストフィールド未入力の場...
おすすめ情報