Q&A
#困っていること
html内でphpのincludeで別のhtmlファイルを読み込み、元htmlと読み込んだhtmlどちらでも「設定」リンクをクリックした際にcookieを残せるようにしたいと考えています。
モーダルでなければcookieの更新ができるのですが、モーダル内でcookieの更新が出来ず原因がわかりません。
「モーダルが表示されたとき」といった条件でイベントを発生させられたら良いのかな、と思うのですがどのように書けばいいのか調べてみてもわからず困っています。
#試したこと
最初はどちらのaタグにも同じidを設定していたためそのせいかとも思ったのですが、違いました。
php
1<?php 2$selected=["0"=>"","1"=>"","2"=>"","3"=>"","4"=>"","5"=>"","6"=>"","7"=>"","8"=>"","9"=>"","10"=>"","11"=>"","12"=>"","13"=>"","14"=>"","15"=>"","16"=>"","17"=>"","18"=>"","19"=>"","20"=>"","21"=>"","22"=>"","23"=>""]; 3$selected[isset($_COOKIE["fuga"])?$_COOKIE["fuga"]:"0"]=" selected"; 4 5 ?> 6 7<!DOCTYPE html> 8<html> 9<head> 10<meta charset="utf-8"> 11<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 12<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> 13<style type="text/css"> 14*{ 15 box-sizing: border-box; 16 margin: 0; 17 padding: 0; 18} 19.content{ 20 margin: 0 auto; 21 padding: 40px; 22} 23.modal{ 24 display: none; 25 height: 100vh; 26 position: fixed; 27 top: 0; 28 width: 100%; 29} 30.modal__bg{ 31 background: rgba(0,0,0,0.8); 32 height: 100vh; 33 position: absolute; 34 width: 100%; 35} 36.modal__content{ 37background: #fff; 38 left: 50%; 39 padding: 40px; 40 position: absolute; 41 top: 50%; 42 transform: translate(-50%,-50%); 43 width: 60%; 44} 45</style> 46<title></title> 47</head> 48<body> 49 <div class="modal__content"> 50 <select class="" name="fuga" id="hoge"> 51 <option value="0" name="fuga"<?=$selected["0"];?>>0:00</option> 52 <option value="1" name="fuga"<?=$selected["1"];?>>1:00</option> 53 <option value="2" name="fuga"<?=$selected["2"];?>>2:00</option> 54 <option value="3" name="fuga"<?=$selected["3"];?>>3:00</option> 55 <option value="4" name="fuga"<?=$selected["4"];?>>4:00</option> 56 <option value="5" name="fuga"<?=$selected["5"];?>>5:00</option> 57 <option value="6" name="fuga"<?=$selected["6"];?>>6:00</option> 58 <option value="7" name="fuga"<?=$selected["7"];?>>7:00</option> 59 <option value="8" name="fuga"<?=$selected["8"];?>>8:00</option> 60 <option value="9" name="fuga"<?=$selected["9"];?>>9:00</option> 61 <option value="10" name="fuga"<?=$selected["10"];?>>10:00</option> 62 <option value="11" name="fuga"<?=$selected["11"];?>>11:00</option> 63 <option value="12" name="fuga"<?=$selected["12"];?>>12:00</option> 64 <option value="13" name="fuga"<?=$selected["13"];?>>13:00</option> 65 <option value="14" name="fuga"<?=$selected["14"];?>>14:00</option> 66 <option value="15" name="fuga"<?=$selected["15"];?>>15:00</option> 67 <option value="16" name="fuga"<?=$selected["16"];?>>16:00</option> 68 <option value="17" name="fuga"<?=$selected["17"];?>>17:00</option> 69 <option value="18" name="fuga"<?=$selected["18"];?>>18:00</option> 70 <option value="19" name="fuga"<?=$selected["19"];?>>19:00</option> 71 <option value="20" name="fuga"<?=$selected["20"];?>>20:00</option> 72 <option value="21" name="fuga"<?=$selected["21"];?>>21:00</option> 73 <option value="22" name="fuga"<?=$selected["22"];?>>22:00</option> 74 <option value="23" name="fuga"<?=$selected["23"];?>>23:00</option> 75 </select><br><br> 76 <a class="test-modal-set" href="" id="set">設定</a><br> 77 </div> 78 79 80<?php include_once('dialog_test.html');?> 81 82<script type="text/javascript"> 83$(function(){ 84 $('.test-modal').show(); 85 $(function(){ 86 window.addEventListener('click',function(){ 87 document.querySelector('select').selected=true; 88 document.querySelector('#set2').addEventListener('click',e=>{ 89 e.preventDefault(); 90 var fuga=document.querySelector('select'); 91 document.cookie="fuga="+fuga.value+";max-age=573500000"; 92 }); 93 }); 94 95 96 $('.test-modal-close').on('click',function(){ 97 $('.test-modal').hide(); 98 return false; 99 }); 100 }); 101}); 102 103window.addEventListener('DOMContentLoaded', ()=>{ 104 document.querySelector('select').selected=true; 105 document.querySelector('#set').addEventListener('click',e=>{ 106 e.preventDefault(); 107 var fuga=document.querySelector('select'); 108 document.cookie="fuga="+fuga.value+";max-age=573500000"; 109 }); 110}); 111 112 113</script> 114</body> 115</html> 116
↓dialog_test.html↓
html
1<div class="modal test-modal"> 2 <div class="modal__bg test-modal-close"></div> 3 <div class="modal__content"> 4 <select class="" name="fuga" id="hoge"> 5 <option value="0" name="fuga"<?=$selected["0"];?>>0:00</option> 6 <option value="1" name="fuga"<?=$selected["1"];?>>1:00</option> 7 <option value="2" name="fuga"<?=$selected["2"];?>>2:00</option> 8 <option value="3" name="fuga"<?=$selected["3"];?>>3:00</option> 9 <option value="4" name="fuga"<?=$selected["4"];?>>4:00</option> 10 <option value="5" name="fuga"<?=$selected["5"];?>>5:00</option> 11 <option value="6" name="fuga"<?=$selected["6"];?>>6:00</option> 12 <option value="7" name="fuga"<?=$selected["7"];?>>7:00</option> 13 <option value="8" name="fuga"<?=$selected["8"];?>>8:00</option> 14 <option value="9" name="fuga"<?=$selected["9"];?>>9:00</option> 15 <option value="10" name="fuga"<?=$selected["10"];?>>10:00</option> 16 <option value="11" name="fuga"<?=$selected["11"];?>>11:00</option> 17 <option value="12" name="fuga"<?=$selected["12"];?>>12:00</option> 18 <option value="13" name="fuga"<?=$selected["13"];?>>13:00</option> 19 <option value="14" name="fuga"<?=$selected["14"];?>>14:00</option> 20 <option value="15" name="fuga"<?=$selected["15"];?>>15:00</option> 21 <option value="16" name="fuga"<?=$selected["16"];?>>16:00</option> 22 <option value="17" name="fuga"<?=$selected["17"];?>>17:00</option> 23 <option value="18" name="fuga"<?=$selected["18"];?>>18:00</option> 24 <option value="19" name="fuga"<?=$selected["19"];?>>19:00</option> 25 <option value="20" name="fuga"<?=$selected["20"];?>>20:00</option> 26 <option value="21" name="fuga"<?=$selected["21"];?>>21:00</option> 27 <option value="22" name="fuga"<?=$selected["22"];?>>22:00</option> 28 <option value="23" name="fuga"<?=$selected["23"];?>>23:00</option> 29 </select><br><br> 30<a class="test-modal-set" href="" id="set2">設定</a><br> 31<a class="test-modal-close" href="" >閉じる</a> 32</div> 33</div> 34
#補足
js
1window.addEventListener('DOMContentLoaded', ()=>{ 2 document.querySelector('select').selected=true; 3 document.querySelector('#set').addEventListener('click',e=>{ 4 e.preventDefault(); 5 var fuga=document.querySelector('select'); 6 document.cookie="fuga="+fuga.value+";max-age=573500000"; 7 return false; 8 }); 9}); 10 11 12$(function(){ 13 $('#modal_set').on('click',function(){ 14 document.cookie="fuga=aaa"; 15 return false; 16 }); 17});
↑でfugaを数字→aaa→数字と更新できるのですが、
js
1window.addEventListener('DOMContentLoaded', ()=>{ 2 document.querySelector('select').selected=true; 3 document.querySelector('#set').addEventListener('click',e=>{ 4 e.preventDefault(); 5 var fuga=document.querySelector('select'); 6 document.cookie="fuga="+fuga.value+";max-age=573500000"; 7 return false; 8 }); 9}); 10 11 12$(function(){ 13 $('#modal_set').on('click',function(){ 14 document.querySelector('select').selected=true; 15 var fuga=document.querySelector('select'); 16 document.cookie="fuga="+fuga.value+";max-age=573500000"; 17 return false; 18 }); 19}); 20
↑だと更新されません
回答1件
0
ベストアンサー
querySelectorの使い方をもう一度確認しましょう。
querySelector
javascript
1window.addEventListener('DOMContentLoaded', ()=>{ 2 document.querySelector('select').selected=true; 3 document.querySelector('#set').addEventListener('click',e=>{ 4 e.preventDefault(); 5 var fuga=document.querySelector('select');//★ 6 document.cookie="fuga="+fuga.value+";max-age=573500000"; 7 return false; 8 }); 9}); 10 11 12$(function(){ 13 $('#modal_set').on('click',function(){ 14 document.querySelector('select').selected=true; 15 var fuga=document.querySelector('select');//★ 16 document.cookie="fuga="+fuga.value+";max-age=573500000"; 17 return false; 18 }); 19});
コードに追加した「//★」の部分で、取得するselectはHTML上で先に登場する要素となります。
つまり、dialog_test.htmlに書かれたselectではなく、それを読み込んでいる「本体側」のファイルに記載されているselectです。
どちらも同じselectの選択値で更新することになりますので、「更新されていない」ように見えているのだと思います。
投稿2019/10/31 03:23
総合スコア1910
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。