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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

117閲覧

java script 自作のスクロールヒントを同一ページ内の複数のテーブルに適応させたい

saekoaaa

総合スコア6

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2024/03/05 02:43

実現したいこと

自作のスクロールヒントを同一ページ内の複数のテーブルに適応させたい

発生している問題・分からないこと

同一ページ内に3つのテーブルがあるので、それぞれにスクロールヒントを適応させました。
各テーブルにタッチするタイミングで各々のスクロールヒントを外したいのですが、ひとつめのテーブルをタッチするとなぜか最後のテーブルにだけ処理が起こってしまいます。

エラーメッセージ

error

1※一つ目のテーブルをタッチすると三つ目のスクロールヒントだけ消える。

該当のソースコード

html

1<div id="swipingBox" class="swipingBox"> 2<table class="flextable swipingBoxTable"> 3<tbody> 4<tr> 5<th></th> 6<td></td> 7</tr> 8</tbody></table></div> 9 10<div id="swipingBox2" class="swipingBox2"> 11<table class="flextable swipingBoxTable"> 12<tbody> 13<tr> 14<th></th> 15<td></td> 16</tr> 17</tbody></table></div> 18 19<div id="swipingBox3" class="swipingBox3"> 20<table class="flextable swipingBoxTable"> 21<tbody> 22<tr> 23<th></th> 24<td></td> 25</tr> 26</tbody></table></div>

css

1@media (max-width: 960px){ 2.swipingBox2, 3.swipingBox3, 4.swipingBox{ 5 overflow-x: scroll; 6 padding: 0 2px; 7 position: relative; 8}} 9.swipingBox2::before, 10.swipingBox3::before, 11.swipingBox::before{ 12content: "\f0a6"; 13font-family: "Font Awesome 5 Free"; 14display: flex; 15justify-content: center; 16align-items: center; 17color: #fff; 18font-weight: bold; 19font-size: 3rem; 20width: 130%; 21height: 100%; 22background: rgba(0,0,0,.6); 23position: absolute; 24top: 0; 25left: 0; 26z-index: 1; 27animation: swayH 2.2s infinite; 28} 29 30@media(max-width:960px) { 31.swipingBox2::before, 32.swipingBox3::before, 33.swipingBox::before{ 34content: ""; 35width: 130%; 36height: 100%; 37background-color: rgba(0,0,0,.4); 38background-image: url(); 39position: absolute; 40background-repeat: no-repeat; 41background-position: center; 42background-size: 54px; 43top: 0; 44left: 0; 45z-index: 1; 46animation: swayH 2.2s infinite; 47} 48} 49@media(min-width:960px) { 50.swipingBox2::before, 51.swipingBox3::before, 52.swipingBox::before{ 53display: none; 54} 55} 56.swipingBox2::after, 57.swipingBox3::after, 58.swipingBox::after{ 59content: "横にスワイプしてください"; 60display: flex; 61justify-content: center; 62padding-top: 90px; 63width: 100%; 64height: 100%; 65position: absolute; 66top: 0; 67left: 0; 68z-index: 1; 69} 70@media(min-width:960px) { 71.swipingBox2::after, 72.swipingBox3::after, 73.swipingBox::after{ 74display: none; 75} 76} 77.swipingBox2.out::before, 78.swipingBox3.out::before, 79.swipingBox.out::before{ 80display: none; 81} 82.swipingBox2.out::after, 83.swipingBox3.out::after, 84.swipingBox.out::after{ 85display: none; 86}

javascript

1window.addEventListener('load',function(){document.getElementById("swipingBox").addEventListener('touchstart',logTouchStart)});function logTouchStart(){$(".swipingBox").addClass("out")} 2window.addEventListener('load',function(){document.getElementById("swipingBox2").addEventListener("touchstart",logTouchStart)});function logTouchStart(){$(".swipingBox2").addClass("out")} 3window.addEventListener('load',function(){document.getElementById("swipingBox3").addEventListener("touchstart",logTouchStart)});function logTouchStart(){$(".swipingBox3").addClass("out")}

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

addEventListener 複数回を使う方法に認識間違いがあるのかと思い検索しましたが、解決できませんでした。

補足

特になし

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

最初のコードの問題点がわからないままですが
javascriptコードを以下に書き換えることでか解決しました。

$('#swipingBox').on("touchstart", function () {
$(".swipingBox").addClass('out');
});

$('#swipingBox2').on("touchstart", function () {
$(".swipingBox2").addClass('out');
});
$('#swipingBox3').on("touchstart", function () {
$(".swipingBox3").addClass('out');
});

投稿2024/03/05 03:25

saekoaaa

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2024/03/05 03:46

logTouchStart() が多重定義になってましたね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問