###前提
マイページにてお知らせメールを受け取る設定の編集画面のhtmlを組みました。
表示はスクリーンショットのようになっています。
###実現したいこと
設定の変更を表示に反映させたいと思っています。
下記流れの2と3のやり方を教えていただけたらと思います。
1「編集」ボタン → 「受け取る」「受け取らない」の選択肢が表示される →
2「受け取らない」に変更 → 保存 → 「キャンペーンやお知らせなどのメールを受け取らない」に表示を変更する
3「受け取らない」に変更 → キャンセル → 編集前の選択肢に戻す
###該当のソースコード
javascript
1//ボタン表示の切り替え 2$(function(){ 3 $('.edit_off').each(function(){ 4 $(this).css({display:"none"}); 5 }); 6 $(".edit_on").click(function(){ 7 $(this).css({display:"none"}); 8 $(this).siblings('.edit_off','.cancel').css({display:"inline"}); 9 }); 10 11 $('.edit_off').click(function(){ 12 $(this).css({display:"none"}); 13 $(this).siblings('.edit_off').css({display:"none"}); 14 $(this).siblings('.edit_on').css({display:"inline"}); 15 }); 16 17 $('.cancel').click(function(){ 18 $(this).css({display:"none"}); 19 $(this).siblings('.edit_off').css({display:"none"}); 20 $(this).siblings('.edit_on').css({display:"inline"}); 21 }); 22}); 23//メール受信 ラジオボタン ボックス開閉 24$(function(){ 25 $('#mailMagazine_open').click(function(){ 26 $('#mailMagazine_box').show(); 27 //キャンセル 28 $(this).siblings(".cancel").click(function(){ 29 $('#mailMagazine_box').hide(); 30 }); 31 //保存 32 $(this).siblings(".save").click(function(){ 33 }); 34 }); 35});
html
1 <!--受信設定--> 2 <tr> 3 <th scope="row" rowspan="2">受信設定</th> 4 <td><span class="checkbox_data">キャンペーンやお知らせなどのメールを受け取る</span> 5 <img src="/images/mypage/btn_edit.png" alt="編集" class="edit edit_on" id="mailMagazine_open"> 6 <img src="/images/mypage/btn_save.png" alt="保存" class="save edit_off"> 7 <img src="/images/mypage/btn_cancel.png" alt="キャンセル" class="cancel edit_off"></td> 8 </tr> 9 10<!--受信設定 編集--> 11 <tr> 12 <td id="mailMagazine_box"> 13 <span class="mwform-radio-field vertical-item"><label for="mailMagazine01" class="checkbox checkbox_left"> 14 <input type="radio" name="mailMagazine" value="受け取る" checked="checked" id='mailMagazine01'/>受け取る</label></span> 15 <span class="mwform-radio-field vertical-item"><label for="mailMagazine02" class="checkbox radiobox_right"> 16 <input type="radio" name="mailMagazine" value="受け取らない" id="mailMagazine02" />受け取らない</label></span> 17 </td> 18 </tr>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/16 12:14
2016/09/16 15:43