前提
レスポンシブ対応のページでinputタグをクリックするとclassの値が渡され、表示が変更する機能をJavaScripで作っています。パソコンのブラウザ(safari以外)ではうまく動くのですが、スマートフォンのタップではうまく動作せず行き詰ってしまいました。
実現したいこと
スマートフォンのタップでも表示が変更する機能に修正したいです。
タッチデバイスか非タッチデバイスかを判定し「クリックイベント」と「タッチイベント」を切り替えたいのですが、やり方を教えていただきたいです。
また、パソコンのsafariでも動作しないのですが、こちらもアドバイスいただけると助かります。
よろしくお願いします。
該当のソースコード
JavaScript
1<script> 2 let prev_menu = null; 3 const menus = document.getElementsByName('menu'); 4 Array.prototype.forEach.call(menus, function(menu) { 5 menu.addEventListener('click', buttonClick, false) 6 }) 7 function buttonClick(event){ 8 console.log(event.target.className); 9 const times = document.getElementsByClassName('first-disabled'); 10 Array.prototype.forEach.call(times, function(time, index) { 11 if(index == 0 || Math.abs(Math.floor((new Date(time.value) - new Date(times[index-1].value)) / (1000 * 60))) > 15){ 12 let tr = time.closest("tr"); 13 const count = disabledCount(event.target.className); 14 for (let i = 0; i < count ; i++) { 15 const prev = tr.previousElementSibling; 16 Array.prototype.forEach.call(prev.children, function(child, it) { 17 if (it !== 0 && new Date(child.children[0].value).getDate() == new Date(time.value).getDate()){ 18 child.children[0].disabled = true; 19 child.children[1].innerText = '不可' 20 tr = prev; 21 } 22 }) 23 } 24 if(prev_menu !== null && disabledCount(prev_menu) > count){ 25 const countDiff = disabledCount(prev_menu) - count; 26 for(let i = 0; i < countDiff; i++){ 27 const prev = tr.previousElementSibling; 28 Array.prototype.forEach.call(prev.children, function(child, it) { 29 if (it !== 0 && new Date(child.children[0].value).getDate() == new Date(time.value).getDate()){ 30 if(child.children[1].innerText !== '予約済'){ 31 child.children[0].disabled = false; 32 child.children[1].innerText = '' 33 } 34 35 tr = prev; 36 } 37 }) 38 } 39 40 } 41 } 42 }) 43 prev_menu = event.target.className; 44 } 45 function disabledCount(min){ 46 return parseInt(min) / 15 47 } 48</script>
PHP
1<!-- ↓↓料金選択↓↓ --> 2<section class="area rate-plan cf"> 3<div class="title"> 4<h3><span>Step1</span>料金を選ぶ</h3> 5</div> 6<div class="contentWrap"> 7<table> 8<tbody> 9<!--料金<tr>開始--> 10<tr> 11<td><input type="radio" name="menu" value="スタンダードコース/35/3,000" id="35" class="35"/> 12<label for="radio1" class="radio">3,000円(35分)</label></td> 13</tr> 14<tr> 15<td><input type="radio" name="menu" value="スタンダードコース/75/5,000" id="75" class="75"/> 16<label for="radio2" class="radio">5,000円(75分)</label></td> 17</tr> 18<!--料金<tr>終了--> 19</tbody> 20</table> 21<p class="note"><?php echo $menuNote; ?></p> 22</div> 23</section> 24<!-- ↑↑料金選択↑↑ --> 25<!-- ↓↓日時選択↓↓--> 26<section class="area dayTime cf"> 27<div class="title"> 28<h3><span>Step2</span>日時を選ぶ</h3> 29</div> 30<div class="contentWrap"> 31<div class="dayForm"> 32<table> 33<th class="no">時間</th> 34<th> <?php echo $todayFmt1; ?>(<?php echo $week[ $todayWeek ];?>)<br> 35<?php 36if ( in_array( $week[ $todayWeek ], $closed ) ) { 37 echo "<span>定休日</span>"; 38} elseif ( in_array( $today, $closedDay ) ) { 39 echo "<span>休業日</span>"; 40} else { 41 echo " "; 42} 43?></th> 44<th> <?php echo $tomorrowFmt1; ?>(<?php echo $week[ $tomorrowWeek ];?>)<br> 45<?php 46if ( in_array( $week[ $tomorrowWeek ], $closed ) ) { 47 echo "<span>定休日</span>"; 48} elseif ( in_array( $tomorrow, $closedDay ) ) { 49 echo "<span>休業日</span>"; 50} else { 51 echo " "; 52} 53?></th> 54<th> <?php echo $inTwoDaysFmt1; ?>(<?php echo $week[ $inTwoDaysWeek ];?>)<br> 55<?php 56if ( in_array( $week[ $inTwoDaysWeek ], $closed ) ) { 57 echo "<span>【定休日】</span>"; 58} elseif ( in_array( $inTwoDays, $closedDay ) ) { 59 echo "<span>休業日</span>"; 60} else { 61 echo " "; 62} 63?></th> 64<?php 65//予約table時間変数設定 66$begin = new DateTime($start); 67$end = new DateTime($end); 68$interval = new DateInterval('PT'.$timeFrame.'M'); 69$daterange = new DatePeriod($begin, $interval, $end->modify('+1 min')); 70foreach ( $daterange as $date ) { 71 $time = $date->format( "H:i:s" ); 72 //日時(今日) 73 $variable = $today . ' '.$time; 74 $endTime = date( "H:i:s", strtotime( $time . "+15 minute" ) ); 75 $variableEnd = $today .' '. $endTime; 76 //日時(明日) 77 $variable2 = $tomorrow .' '. $time; 78 $endTime2 = date( "H:i:s", strtotime( $time . "+15 minute" ) ); 79 $variableEnd2 = $tomorrow .' '. $endTime2; 80 //日時(明後日) 81 $variable3 = $inTwoDays .' '. $time; 82 $endTime3 = date( "H:i:s", strtotime( $time . "+15 minute" ) ); 83 $variableEnd3 = $inTwoDays .' '. $endTime3; 84?> 85<tr class='day_table'> 86<td class="time"><?php echo $time; ?></td> 87<!--今日--> 88<td><input type='radio' name='day' id='<?php echo $variable; ?>' value='<?php echo $variable; ?>' 89<?php 90//データーベースから呼び出す 91$sql = "SELECT 92 count(*) 93 FROM 94 customersub 95 WHERE 96 shop_id = 1 97 AND 98 reserve_day = '".$today."' 99 AND (start_time < '".$variableEnd."' AND end_time >= '".$variable."')"; 100 101$stmt = $dbh->query($sql); 102$num = $stmt->fetchColumn(); 103 104if(in_array( $week[ $todayWeek ], $closed ) ) { 105 echo 'disabled'; 106}elseif(in_array( $today, $closedDay )){ 107 echo 'disabled'; 108}elseif ( in_array( $variable, (array)$breakTime ) ) { 109 echo 'disabled'; 110}elseif ( strtotime( date( 'H:i' ) ) > strtotime( $time ) ) { 111 echo 'disabled'; 112}elseif($time <= $HalfAnHour ){ 113echo 'disabled'; 114}elseif($num >= 1){ 115echo 'disabled class="first-disabled"'; 116} 117?>> 118<label for='<?php echo $variable;?>'> 119<?php 120if ( in_array( $week[ $todayWeek ], $closed ) || in_array( $today, $closedDay ) ) { 121 echo "<i class='fas fa-minus'></i>"; 122} elseif ( strtotime( date( 'H:i' ) ) > strtotime( $time ) ) { 123 echo "<i class='fas fa-times'></i>"; //× 124} elseif ( in_array( $variable, (array)$breakTime ) ) { 125 echo "<i class='fas fa-minus'></i>"; 126}elseif ( strtotime( date( 'H:i' ) ) > strtotime( $time ) || $time <= $HalfAnHour ) { 127 echo "TEL"; 128}elseif ( $num >= 1) { 129 echo "予約済"; 130}else { 131 echo "<span class='result1'></span>"; //result1は選択可能のアイコン 132} 133?> 134</label></td> 135<!--明日--> 136<td><input type='radio' name='day' id='<?php echo $variable2;?>' value='<?php echo $variable2;?>' 137<?php 138//データーベースから呼び出す 139$sql = " 140SELECT 141 count(*) 142FROM 143 customersub 144WHERE 145 shop_id = 1 146AND 147 reserve_day = '".$tomorrow."' 148AND 149 (start_time <'".$variableEnd2."' AND end_time >= '".$variable2."') 150"; 151 152$stmt = $dbh->query($sql); 153$num2 = $stmt->fetchColumn(); 154 155if ($value == $week[$tomorrowWeek] ) { 156echo 'disabled'; 157}elseif(in_array( $tomorrow, $closedDay )){ 158echo 'disabled'; 159}elseif ( in_array( $variable2, (array)$breakTime ) ) { 160 echo 'disabled'; 161}elseif($num2 >= 1){ 162echo 'disabled class="first-disabled"'; 163} 164?>> 165<label for='<?php echo $tomorrow.$time;?>'> 166<?php 167if ( in_array( $week[ $tomorrowWeek ], $closed ) || in_array( $tomorrow, $closedDay ) ) { 168 echo "<i class='fas fa-minus'></i>"; 169} elseif ( in_array( $variable2, (array)$breakTime ) ) { 170 echo "<i class='fas fa-minus'></i>"; 171} elseif ( $num2 >= 1) { 172 echo "予約済"; 173}else { 174 echo "<span class='result1'></span>"; 175} 176?> 177</label></td> 178<!--明後日--> 179<td><input type='radio' name='day' id='<?php echo $variable3;?>' value='<?php echo $variable3;?>' 180<?php 181//データーベースから呼び出す 182$sql = " 183SELECT 184 count(*) 185FROM 186 customersub 187WHERE 188 shop_id = 1 189AND 190 reserve_day = '".$inTwoDays."' 191AND 192 (start_time <'".$variableEnd3."' AND end_time >= '".$variable3."') 193"; 194 195$stmt = $dbh->query($sql); 196$num3 = $stmt->fetchColumn(); 197 198if ($value == $week[$inTwoDaysWeek]) { 199echo 'disabled'; 200}elseif(in_array( $inTwoDays, $closedDay )){ 201echo 'disabled'; 202}elseif ( in_array( $variable3, (array)$breakTime ) ) { 203 echo 'disabled'; 204}elseif($num3 >= 1){ 205echo 'disabled class="first-disabled"'; 206} 207?>> 208<label for='<?php echo $inTwoDays.$time; ?>'> 209<?php 210if ( in_array( $week[ $inTwoDaysWeek ], $closed ) || in_array( $inTwoDays, $closedDay ) ) { 211 echo "<i class='fas fa-minus'></i>"; 212} elseif ( in_array( $variable3, (array)$breakTime ) ) { 213 echo "<i class='fas fa-minus'></i>"; 214} elseif ( $num3 >= 1) { 215 echo "予約済"; 216}else { 217 echo "<span class='result1'></span>"; 218} 219?> 220</label></td> 221</tr> 222<?php } ?> 223</table> 224</div> 225</div> 226</section> 227<!-- ↑↑日時選択↑↑-->
試したこと
https://alaki.co.jp/blog/?p=2546
を参考に修正しようと思ったのですが、下記を自分のコードのどのように追加すればいいのか分かりませんでした。
JavaScript
1$(function(){ 2 var clickEventType = (( window.ontouchstart!==null ) ? 'click':'touchend'); 3 4 $(document).on(clickEventType,'セレクタ名',function(){ 5 #アコーディオン処理 6 }); 7 }); 8
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。