IntersectionObserverで監査した要素にclassが付与できない

いつもお世話になっております。

下記の記事を参考にして現在ページを作成しております。
https://ics.media/entry/190902/

ページのほうは直接掲載するとソースが長くなりそうだったのでcodePenのほうに反映させていただいています。
https://codepen.io/MID-LOW/pen/GRmXYOw

質問の内容としましては、
BOXの要素が画面内に表示されたときにis-activeというclassを付与しているのですが、
2つ目のBOXの要素が画面内に表示されたとき、1つ目のis-activeを消して2つ目のBOX要素にis-activeを付与したいと考えています。
続く3つ目も同様で、3つ目のBOX要素が画面内に表示されたときに2つ目のis-activeが消えるような処理にしたいです。

ですが現在は、1つ目のBOX要素が表示されたときにis-activeが付与されるのは問題ないのですが、
2つ目のBOX要素が表示されたとき、1つ目の要素のis-activeが一瞬消えて、再度1つ目のBOX要素にis-activeが付与されてしまいます。

consoleではとくにエラーが出ているようではなさそうなのですが、
修正点や変更点などありましたらご指摘いただけますと幸いです。

何卒宜しくお願いします。

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

回答1件

ベストアンサー

document.querySelector(".imageContent-item")は、.imageContent-itemであるひとつ目の要素を取得します。

指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返します。

Document.querySelector() - Web API | MDN

おそらく、想定されている要素と異なるのでは。

解決方法ですが、.emptyBox の id と .imageContent-item のクラスが連携しているようですから、それを拾って指定するのがいいと思います。

投稿2021/08/05 06:44

編集2021/08/05 06:48

Lhankor_Mhy

総合スコア36163

eric_1225

2021/08/05 07:50

いつもありがとうございます！なるほどです。 .item-img--1やitem-img--2などが指定できるようにすればいいとのこと、理解いたしました。その場合ですが、document.querySelector(".imageContent-item");の中を.item-img--1などに指定することになると思うのですが、document.querySelector(".item-img--1,.item-img--2,.item-img--3,.item-img--4");という指定方法ではないですよね…？検索でどう調べればいいのかも検討付かずで申し訳ございませんが、お力添えいただけますと幸いです。