質問: ### 前提 マイページにてお知らせメールを受け取る設定の編集画面のhtmlを組みました。 表示はスクリーンショットのようになっています。 ![編集前](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/c14a7314b212caac3f306d468fca74da.png) ![編集状態](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/49da49b066ec7679e52f2f894cb7e526.png) ### 実現したいこと 設定の変更を表示に反映させたいと思っています。 下記流れの2と3のやり方を教えていただけたらと思います。 1「編集」ボタン → 「受け取る」「受け取らない」の選択肢が表示される → 2「受け取らない」に変更 → 保存 → 「キャンペーンやお知らせなどのメールを受け取らない」に表示を変更する 3「受け取らない」に変更 → キャンセル → 編集前の選択肢に戻す ### 該当のソースコード ``` //ボタン表示の切り替え $(function(){ $('.edit_off').each(function(){ $(this).css({display:"none"}); }); $(".edit_on").click(function(){ $(this).css({display:"none"}); $(this).siblings('.edit_off','.cancel').css({display:"inline"}); }); $('.edit_off').click(function(){ $(this).css({display:"none"}); $(this).siblings('.edit_off').css({display:"none"}); $(this).siblings('.edit_on').css({display:"inline"}); }); $('.cancel').click(function(){ $(this).css({display:"none"}); $(this).siblings('.edit_off').css({display:"none"}); $(this).siblings('.edit_on').css({display:"inline"}); }); }); //メール受信 ラジオボタン ボックス開閉 $(function(){ $('#mailMagazine_open').click(function(){ $('#mailMagazine_box').show(); //キャンセル $(this).siblings(".cancel").click(function(){ $('#mailMagazine_box').hide(); }); //保存 $(this).siblings(".save").click(function(){ }); }); }); ``` ``` 受信設定 キャンペーンやお知らせなどのメールを受け取る 受け取る 受け取らない ```
回答: 現状コードに合わせて書いてみました。 ``` //初期値を設定 var checkbox_dataValue_true = "キャンペーンやお知らせなどのメールを受け取る", checkbox_dataValue_false = "キャンペーンやお知らせなどのメールを受け取らない", inputValue_true = "受け取る", inputValue_false = "受け取らない"; $(".save").click(function(){ //ラジオボタンの値を受け取る var inputValue = $("input[name=mailMagazine]:checked").val(); //初期値と見比べる var txt = (inputValue === inputValue_true) ? checkbox_dataValue_true : checkbox_dataValue_false; //チェックボックスの値を修正 $(".checkbox_data").text(txt); }); ``` 失礼ですが今のコードは無駄が多いので色々修正した方がいいと思います。 ・DOMのreadyイベントは1つでいいと思います。 ・よく使うセレクタはキャッシュする。 ・$('.edit_off').eachでdisplay:noneを入れてますが、初期値がそうなら手入力でいれておいた方がいいです。環境やページ量次第でReadyイベントは遅れます。イベントが走るまで開いた状態になる。 ・同ページに1度しかでない要素ならセレクタはID指定がいいです。DOM全体を探してしまうので無駄な処理が発生します。