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

実現したいこと

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

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

同一ページ内に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 複数回を使う方法に認識間違いがあるのかと思い検索しましたが、解決できませんでした。

補足

特になし

行動規範の内容に同意します

回答1件

自己解決

最初のコードの問題点がわからないままですが
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