前提
レスポンシブ対応のページでinputタグをクリックするとclassの値が渡され、表示が変更する機能をJavaScripで作っています。パソコンのブラウザ（safari以外）ではうまく動くのですが、スマートフォンのタップではうまく動作せず行き詰ってしまいました。
実現したいこと
スマートフォンのタップでも表示が変更する機能に修正したいです。
タッチデバイスか非タッチデバイスかを判定し「クリックイベント」と「タッチイベント」を切り替えたいのですが、やり方を教えていただきたいです。
また、パソコンのsafariでも動作しないのですが、こちらもアドバイスいただけると助かります。
よろしくお願いします。
該当のソースコード
JavaScript
<script> let prev_menu = null; const menus = document.getElementsByName('menu'); Array.prototype.forEach.call(menus, function(menu) { menu.addEventListener('click', buttonClick, false) }) function buttonClick(event){ console.log(event.target.className); const times = document.getElementsByClassName('first-disabled'); Array.prototype.forEach.call(times, function(time, index) { if(index == 0 || Math.abs(Math.floor((new Date(time.value) - new Date(times[index-1].value)) / (1000 * 60))) > 15){ let tr = time.closest("tr"); const count = disabledCount(event.target.className); for (let i = 0; i < count ; i++) { const prev = tr.previousElementSibling; Array.prototype.forEach.call(prev.children, function(child, it) { if (it !== 0 && new Date(child.children[0].value).getDate() == new Date(time.value).getDate()){ child.children[0].disabled = true; child.children[1].innerText = '不可' tr = prev; } }) } if(prev_menu !== null && disabledCount(prev_menu) > count){ const countDiff = disabledCount(prev_menu) - count; for(let i = 0; i < countDiff; i++){ const prev = tr.previousElementSibling; Array.prototype.forEach.call(prev.children, function(child, it) { if (it !== 0 && new Date(child.children[0].value).getDate() == new Date(time.value).getDate()){ if(child.children[1].innerText !== '予約済'){ child.children[0].disabled = false; child.children[1].innerText = '' } tr = prev; } }) } } } }) prev_menu = event.target.className; } function disabledCount(min){ return parseInt(min) / 15 }</script>
PHP
<!-- ↓↓料金選択↓↓ --><section class="area rate-plan cf"><div class="title"><h3><span>Step1</span>料金を選ぶ</h3></div><div class="contentWrap"><table><tbody><!--料金<tr>開始--><tr><td><input type="radio" name="menu" value="スタンダードコース/35/3,000" id="35" class="35"/><label for="radio1" class="radio">3,000円（35分）</label></td></tr><tr><td><input type="radio" name="menu" value="スタンダードコース/75/5,000" id="75" class="75"/><label for="radio2" class="radio">5,000円（75分）</label></td></tr><!--料金<tr>終了--></tbody></table><p class="note"><?php echo $menuNote; ?></p></div></section><!-- ↑↑料金選択↑↑ --> <!-- ↓↓日時選択↓↓--><section class="area dayTime cf"><div class="title"><h3><span>Step2</span>日時を選ぶ</h3></div><div class="contentWrap"><div class="dayForm"><table><th class="no">時間</th><th> <?php echo $todayFmt1; ?>（<?php echo $week[ $todayWeek ];?>）<br><?phpif ( in_array( $week[ $todayWeek ], $closed ) ) { echo "<span>定休日</span>";} elseif ( in_array( $today, $closedDay ) ) { echo "<span>休業日</span>";} else { echo " ";}?></th><th> <?php echo $tomorrowFmt1; ?>（<?php echo $week[ $tomorrowWeek ];?>）<br><?phpif ( in_array( $week[ $tomorrowWeek ], $closed ) ) { echo "<span>定休日</span>";} elseif ( in_array( $tomorrow, $closedDay ) ) { echo "<span>休業日</span>";} else { echo " ";}?></th><th> <?php echo $inTwoDaysFmt1; ?>（<?php echo $week[ $inTwoDaysWeek ];?>）<br><?phpif ( in_array( $week[ $inTwoDaysWeek ], $closed ) ) { echo "<span>【定休日】</span>";} elseif ( in_array( $inTwoDays, $closedDay ) ) { echo "<span>休業日</span>";} else { echo " ";}?></th><?php//予約table時間変数設定$begin = new DateTime($start);$end = new DateTime($end);$interval = new DateInterval('PT'.$timeFrame.'M');$daterange = new DatePeriod($begin, $interval, $end->modify('+1 min'));foreach ( $daterange as $date ) { $time = $date->format( "H:i:s" ); //日時（今日） $variable = $today . ' '.$time; $endTime = date( "H:i:s", strtotime( $time . "+15 minute" ) ); $variableEnd = $today .' '. $endTime; //日時（明日） $variable2 = $tomorrow .' '. $time; $endTime2 = date( "H:i:s", strtotime( $time . "+15 minute" ) ); $variableEnd2 = $tomorrow .' '. $endTime2; //日時（明後日） $variable3 = $inTwoDays .' '. $time; $endTime3 = date( "H:i:s", strtotime( $time . "+15 minute" ) ); $variableEnd3 = $inTwoDays .' '. $endTime3;?><tr class='day_table'><td class="time"><?php echo $time; ?></td><!--今日--><td><input type='radio' name='day' id='<?php echo $variable; ?>' value='<?php echo $variable; ?>' <?php//データーベースから呼び出す$sql = "SELECT count(*) FROM customersub WHERE shop_id = 1 AND reserve_day = '".$today."' AND (start_time < '".$variableEnd."' AND end_time >= '".$variable."')";$stmt = $dbh->query($sql);$num = $stmt->fetchColumn();if(in_array( $week[ $todayWeek ], $closed ) ) { echo 'disabled';}elseif(in_array( $today, $closedDay )){ echo 'disabled';}elseif ( in_array( $variable, (array)$breakTime ) ) { echo 'disabled';}elseif ( strtotime( date( 'H:i' ) ) > strtotime( $time ) ) { echo 'disabled';}elseif($time <= $HalfAnHour ){echo 'disabled';}elseif($num >= 1){echo 'disabled class="first-disabled"';}?>><label for='<?php echo $variable;?>'><?phpif ( in_array( $week[ $todayWeek ], $closed ) || in_array( $today, $closedDay ) ) { echo "<i class='fas fa-minus'></i>";} elseif ( strtotime( date( 'H:i' ) ) > strtotime( $time ) ) { echo "<i class='fas fa-times'></i>"; //×} elseif ( in_array( $variable, (array)$breakTime ) ) { echo "<i class='fas fa-minus'></i>";}elseif ( strtotime( date( 'H:i' ) ) > strtotime( $time ) || $time <= $HalfAnHour ) { echo "TEL";}elseif ( $num >= 1) { echo "予約済";}else { echo "<span class='result1'></span>"; //result1は選択可能のアイコン}?></label></td><!--明日--><td><input type='radio' name='day' id='<?php echo $variable2;?>' value='<?php echo $variable2;?>'<?php//データーベースから呼び出す$sql = " SELECT count(*) FROM customersub WHERE shop_id = 1 AND reserve_day = '".$tomorrow."' AND (start_time <'".$variableEnd2."' AND end_time >= '".$variable2."') ";$stmt = $dbh->query($sql);$num2 = $stmt->fetchColumn();if ($value == $week[$tomorrowWeek] ) {echo 'disabled';}elseif(in_array( $tomorrow, $closedDay )){echo 'disabled';}elseif ( in_array( $variable2, (array)$breakTime ) ) { echo 'disabled';}elseif($num2 >= 1){echo 'disabled class="first-disabled"';}?>><label for='<?php echo $tomorrow.$time;?>'><?phpif ( in_array( $week[ $tomorrowWeek ], $closed ) || in_array( $tomorrow, $closedDay ) ) { echo "<i class='fas fa-minus'></i>";} elseif ( in_array( $variable2, (array)$breakTime ) ) { echo "<i class='fas fa-minus'></i>";} elseif ( $num2 >= 1) { echo "予約済";}else { echo "<span class='result1'></span>";}?></label></td><!--明後日--><td><input type='radio' name='day' id='<?php echo $variable3;?>' value='<?php echo $variable3;?>'<?php//データーベースから呼び出す$sql = " SELECT count(*) FROM customersub WHERE shop_id = 1 AND reserve_day = '".$inTwoDays."' AND (start_time <'".$variableEnd3."' AND end_time >= '".$variable3."') ";$stmt = $dbh->query($sql);$num3 = $stmt->fetchColumn();if ($value == $week[$inTwoDaysWeek]) {echo 'disabled';}elseif(in_array( $inTwoDays, $closedDay )){echo 'disabled';}elseif ( in_array( $variable3, (array)$breakTime ) ) { echo 'disabled';}elseif($num3 >= 1){echo 'disabled class="first-disabled"';}?>><label for='<?php echo $inTwoDays.$time; ?>'><?phpif ( in_array( $week[ $inTwoDaysWeek ], $closed ) || in_array( $inTwoDays, $closedDay ) ) { echo "<i class='fas fa-minus'></i>";} elseif ( in_array( $variable3, (array)$breakTime ) ) { echo "<i class='fas fa-minus'></i>";} elseif ( $num3 >= 1) { echo "予約済";}else { echo "<span class='result1'></span>";}?></label></td></tr><?php } ?></table></div></div></section><!-- ↑↑日時選択↑↑-->
試したこと
https://alaki.co.jp/blog/?p=2546
を参考に修正しようと思ったのですが、下記を自分のコードのどのように追加すればいいのか分かりませんでした。
JavaScript
$(function(){ var clickEventType = (( window.ontouchstart!==null ) ? 'click':'touchend'); $(document).on(clickEventType,'セレクタ名',function(){ #アコーディオン処理 }); });
0 コメント