前提
下記のHTMLソースがあったとします。
<html> <header id="foo"></header> <div id="baa"></div> <div id="hogehoge"></div> </html>
javascriptソースコード
java
<script> window.addEventListener("scroll", function () { if (window.innerWidth <= 767) { const foo = document.querySelector("#foo"); header.classList.toggle("hoge", window.scrollY > 100); const baa = document.querySelector("#baa"); baa.classList.toggle("hoge", window.scrollY > 100); const hogehoge = document.querySelector("#hogehoge"); hogehoge.classList.toggle("hoge", window.scrollY > 100); } });</script>
実現したいこと
現状のjavascriptでも正常に動いてはいるのですが、同じ条件下で同じクラスを付けているため、もう少しソースがコンパクトにできないかと悩んでいます。
const all = document.querySelector("#foo, #baa, #hogehoge");
や
const all = document.querySelectorAll("#foo, #baa, #hogehoge");
などを試しましたが、うまく全てのIDにクラスが付いてくれませんでした。
どのようにすればコンパクトにできるでしょうか。
また、今回の条件ではコンパクトにはできないでしょうか。
初心者なため、これ以上はどうすることもできなかったため、お力を貸して頂ければと思います。
よろしくお願いします。
0 コメント