横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
jQueryでは、クリックされるたびに異なる処理を実行する。
.toggle() イベント |
クリックされるたびに異なる処理を実行する。 書式; $("セレクター名").toggle(function(){ 最初にクリックされた時に実行する処理 },function(){ 2回目にクリックされた時に実行する処理 },function(){ (省略) }); |
---|
クリックする毎に処理を変更する、フォームの部品から値の取出しと変更する。
動作; ボタン(確認)をクリックすると、メールアドレスの値に文言を追加して表示し
ボタンに(送信)と表示する。
メールアドレスが未入力でボタンをクリックするとエラー文言を表示する。
ボタン(送信)をクリックすると、初期状態(ボタン:確認)になる。
jQueryの書き方 |
/*------------------------------------ */ //51-02) 1. .toggle() イベント /*------------------------------------ */ //選択処理 $("#btn_241").toggle(function(){ //値を取得処理 $("#msg_241").text("111111111111"); if($("#inp_241").val() != ""){ $("#p_241").text($("#inp_241").val()+"にメールを送信します。"); $("#btn_241").text("送 信"); $("#msg_241").text(""); }else{ $("#msg_241").text("必須入力項目です。"); $("#btn_241").text("キャンセル"); } //2回目の押下処理 },function(){ $("#msg_241").text(""); $("#p_241").text(""); $("#inp_241").val(""); $("#btn_241").text("確 認"); }); |
---|---|
cssの書き方 |
----------------- |
HTMLの書き方 |
メールアドレス: <input id="inp_241" type="text" name="name" /> <p id="p_241"></p> <button id="btn_241" class="btnStd_170 Gray">確 認</button> <p id="msg_241" class="colRedBd"></p> |
メールアドレス:mail address |
---|