質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

タッチデバイスか非タッチデバイスかを判定し「クリックイベント」と「タッチイベント」を切り替えたい

emi_ono
emi_ono

総合スコア71

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0リアクション

1クリップ

315閲覧

投稿2022/08/16 08:07

前提

レスポンシブ対応のページで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> <?php if ( in_array( $week[ $todayWeek ], $closed ) ) { echo "<span>定休日</span>"; } elseif ( in_array( $today, $closedDay ) ) { echo "<span>休業日</span>"; } else { echo "&nbsp;"; } ?></th> <th> <?php echo $tomorrowFmt1; ?><?php echo $week[ $tomorrowWeek ];?><br> <?php if ( in_array( $week[ $tomorrowWeek ], $closed ) ) { echo "<span>定休日</span>"; } elseif ( in_array( $tomorrow, $closedDay ) ) { echo "<span>休業日</span>"; } else { echo "&nbsp;"; } ?></th> <th> <?php echo $inTwoDaysFmt1; ?><?php echo $week[ $inTwoDaysWeek ];?><br> <?php if ( in_array( $week[ $inTwoDaysWeek ], $closed ) ) { echo "<span>【定休日】</span>"; } elseif ( in_array( $inTwoDays, $closedDay ) ) { echo "<span>休業日</span>"; } else { echo "&nbsp;"; } ?></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;?>'> <?php if ( 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;?>'> <?php if ( 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; ?>'> <?php if ( 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(){ #アコーディオン処理 }); });

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。