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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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

Q&A

解決済

iPhoneのみjavascriptがうまく動作しません

higashi
higashi

総合スコア10

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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

1回答

0グッド

0クリップ

219閲覧

投稿2022/11/21 14:17

前提

先日こちらの質問をさせていただいたものです。
https://teratail.com/questions/da9vtdfo832940

いったん、解決したと思っていたのですがiPhone(iOS16.1.1 iPhoneXs)のみ
土日の時刻に変化がないことが判明し、どう直せばいいのか分からずつまずいております。
PC、Andoroidではちゃんと動きます。

実現したいこと

ソースになにか不備があるとは思うのですが、それが分からず困っております。

発生している問題・エラーメッセージ

該当のソースコード

php(wp)

1<dt><span class="hissu">必須</span>1希望日時</dt> 2<dd class="d_flex"> 3<span class="daytime">希望日</span> [mwform_text name="第1希望日" size="15" placeholder="希望日を選択して下さい" js="minDate:'+2d'" ] 4<span class="daytime"> 時間 </span> 5[mwform_select name="第1希望日時間" class="form-child1" children=":希望時間を選択して下さい,9:00,9:30,10:00,10:30,11:00,11:30,12:00,12:30,14:30,15:00,15:30,16:00,16:30,17:00,17:30,18:00,18:30,19:00,19:30" post_raw="true"] 6</dd> 7 8<dt><span class="nini">任意</span>2希望日時</dt> 9<dd class="d_flex"> 10<span class="daytime">希望日</span> [mwform_text name="第2希望日" size="15" placeholder="希望日を選択して下さい" js="minDate:'+2d'" ] 11<span class="daytime"> 時間 </span> 12[mwform_select name="第2希望日時間" class="form-child2" children=":希望時間を選択して下さい,9:00,9:30,10:00,10:30,11:00,11:30,12:00,12:30,14:30,15:00,15:30,16:00,16:30,17:00,17:30,18:00,18:30,19:00,19:30" post_raw="true"] 13</dd> 14 15<dt><span class="nini">任意</span>3希望日時</dt> 16<dd class="d_flex"> 17<span class="daytime">希望日</span> [mwform_text name="第3希望日" size="15" placeholder="希望日を選択して下さい" js="minDate:'+2d'" ] 18<span class="daytime"> 時間 </span> 19[mwform_select name="第3希望日時間" class="form-child3" children=":希望時間を選択して下さい,9:00,9:30,10:00,10:30,11:00,11:30,12:00,12:30,14:30,15:00,15:30,16:00,16:30,17:00,17:30,18:00,18:30,19:00,19:30" post_raw="true"] 20</dd>

js

1<script> 2jQuery(function($){ 3$("input[name='第1希望日']").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい 4var fDate1 = $("input[name='第1希望日']").datepicker('getDate'); 5if (fDate1 !== null) { 6 fDate1 instanceof Date; 7 var youbi1 = fDate1.getDay(); /**********曜日を0から6の整数で取得**************/ 8} 9 if (youbi1 === 0||youbi1 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/ 10 $('select.form-child1').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').hide(); 11 }else{ 12 $('select.form-child1').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').show(); 13 } 14}); 15 16 17$("input[name='第2希望日']").datepicker().on("change", function(e){ 18var fDate2 = $("input[name='第2希望日']").datepicker('getDate'); 19if (fDate2 !== null) { 20 fDate2 instanceof Date; 21 var youbi2 = fDate2.getDay(); 22} 23if (youbi2 === 0||youbi2 === 6){ 24 $('select.form-child2').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').hide(); 25 }else{ 26   $('select.form-child2').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').show(); 27 } 28}); 29 30 31$("input[name='第3希望日']").datepicker().on("change", function(e){ 32var fDate3 = $("input[name='第3希望日']").datepicker('getDate'); 33if (fDate3 !== null) { 34 fDate3 instanceof Date; 35 var youbi3 = fDate3.getDay(); 36} 37if (youbi3 === 0||youbi3 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/ 38 $('select.form-child3').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').hide(); 39 }else{ 40   $('select.form-child3').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').show(); 41 } 42}); 43 44});/****終了*****/ 45 46</script>

試したこと

構文チェックサイト https://jshint.com/
でどこがだめなのか確認したのですが、どう対処すればいいのかわかりませんでした。
ほかには、DOM要素に css cursor:pointer; を追加すれば直る という情報があり試してみましたがダメでした

補足情報(FW/ツールのバージョンなど)

iOS16.1.1 iPhoneXs での動作がうまく動きませんでした

なにかご存知の方がいやっしゃいましたらよろしくお願いいたします。

以下のような質問にはグッドを送りましょう

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

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

penguin520

2022/11/23 10:49

うまく動かないというのは、具体的にどういう動作をするのでしょうか。 jQueryをいま実装している案件がありますが、iPhoneだけうまくCSSがあたらないことを対応しています。
higashi

2022/11/23 13:02

ご連絡ありがとうございます。 歯科医の予約フォームなのですが、 具体的には 平日を選んだ場合は朝9:00~19:30までの30分刻みで時刻を指定でき、 土日を選んだ場合は朝9:00~17:30までの30分刻みで指定できるのですが、 iPhoneのみ、土日も平日と同じ19:30までの時刻が表示されてしまいます。

回答1

0

自己解決

かなり強引なのですが、解決しました。
.show .hide がうまく動いてなかったのですが、.removeはiPhoneでも動いていたので、こちらをベースに考えました。
phpには 土日の時間(9:00~17:30)を設定し、平日を選択すると(18:00~19:30)が追加されるようにしました。ただ、つづけて平日を選択すると(18:00~19:30)が延々と増えていくので、.removeで(18:00~19:30)を削除するようにしました。
平日から土日を選択した場合も(18:00~19:30)が残っているので、.removeで(18:00~19:30)を削除するようにしました。

jsが分かる方だと、こんなソースにはならないとは思うのですが、なんとか理想の動きになってよかったです。
ご協力ありがとうございました。

php

1<dt><span class="hissu">必須</span>1希望日時</dt> 2<dd class="d_flex" > 3<span class="daytime">希望日</span> [mwform_text name="第1希望日" size="15" placeholder="希望日を選択して下さい" js="minDate:'+2d'" ] 4<span class="daytime"> 時間 </span> 5[mwform_select name="第1希望日時間" class="form-child1" children=":希望時間を選択して下さい,9:00,9:30,10:00,10:30,11:00,11:30,12:00,12:30,14:30,15:00,15:30,16:00,16:30,17:00,17:30" post_raw="true"] 6</dd> 7 8 9<dt><span class="nini">任意</span>2希望日時</dt> 10<dd class="d_flex"> 11<span class="daytime">希望日</span> [mwform_text name="第2希望日" size="15" placeholder="希望日を選択して下さい" js="minDate:'+2d'" ] 12<span class="daytime"> 時間 </span> 13[mwform_select name="第2希望日時間" class="form-child2" children=":希望時間を選択して下さい,9:00,9:30,10:00,10:30,11:00,11:30,12:00,12:30,14:30,15:00,15:30,16:00,16:30,17:00,17:30" post_raw="true"] 14</dd> 15 16 17<dt><span class="nini">任意</span>3希望日時</dt> 18<dd class="d_flex" > 19<span class="daytime">希望日</span> [mwform_text name="第3希望日" size="15" placeholder="希望日を選択して下さい" js="minDate:'+2d'" ] 20<span class="daytime"> 時間 </span> 21[mwform_select name="第3希望日時間" class="form-child3" children=":希望時間を選択して下さい,9:00,9:30,10:00,10:30,11:00,11:30,12:00,12:30,14:30,15:00,15:30,16:00,16:30,17:00,17:30" post_raw="true"] 22</dd> 23

js

1 2<script> 3jQuery(function($){ 4 5$("input[name='第1希望日']").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい 6var fDate1 = $("input[name='第1希望日']").datepicker('getDate'); 7if (fDate1 !== null) { 8 fDate1 instanceof Date; 9 var youbi1 = fDate1.getDay(); /**********曜日を0から6の整数で取得**************/ 10} 11 if (youbi1 === 0||youbi1 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/ 12 $('select.form-child1').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').remove(); 13 }else{ 14   $('select.form-child1').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').remove(); 15   $('select.form-child1').append($('<option value=18:00> 18:00 </option><option value=18:30> 18:30 </option><option value=19:00> 19:00 </option><option value=19:30> 19:30 </option>')); 16 } 17}); 18 19$("input[name='第2希望日']").datepicker().on("change", function(e){ 20var fDate2 = $("input[name='第2希望日']").datepicker('getDate'); 21if (fDate2 !== null) { 22 fDate2 instanceof Date; 23 var youbi2 = fDate2.getDay(); 24} 25if (youbi2 === 0||youbi2 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/ 26 $('select.form-child2').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').remove(); 27 }else{ 28   $('select.form-child2').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').remove(); 29   $('select.form-child2').append($('<option value=18:00> 18:00 </option><option value=18:30> 18:30 </option><option value=19:00> 19:00 </option><option value=19:30> 19:30 </option>')); 30 } 31}); 32 33 34$("input[name='第3希望日']").datepicker().on("change", function(e){ 35var fDate3 = $("input[name='第3希望日']").datepicker('getDate'); 36if (fDate3 !== null) { 37 fDate3 instanceof Date; 38 var youbi3 = fDate3.getDay(); 39} 40if (youbi3 === 0||youbi3 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/ 41 $('select.form-child3').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').remove(); 42 }else{ 43   $('select.form-child3').children('option[value=18:00],option[value=18:30],option[value=19:00],option[value=19:30]').remove(); 44   $('select.form-child3').append($('<option value=18:00> 18:00 </option><option value=18:30> 18:30 </option><option value=19:00> 19:00 </option><option value=19:30> 19:30 </option>')); 45 } 46}); 47 48});/****終了*****/ 49 50</script>

投稿2022/11/24 06:18

higashi

総合スコア10

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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