for文でclassListを使いたい

スクロールするとクラスをつけるコーディングを行っています。

スクロール監視はscroll magicです。
可視範囲に入ったらclassList.addでクラスを追加したいのですが、'classList' of undefinedになります。

consoleで調べた所、$sectionは取れるものの、$section[i]がundefinedになるので
classListが使えない事は理解できたのですが、実際の解決法がわかりません。

お分かりになる方いらっしゃいましたらご教示頂けますでしょうか、よろしくお願いします。

html
1<html lang="ja">
2<head>
3  <meta charset="UTF-8">
4  <title>Document</title>
5  <style>
6    .box {
7      background: #f7f5f5;
8      width: 600px;
9      height: 400px;
10      margin: 80px 0;
11    }
12    .box:nth-child(even) {
13      margin-left: auto;
14    }
15  </style>
16</head>
17<body>
18  <div class="box content"></div>
19  <div class="box content"></div>
20  <div class="box content"></div>
21  <div class="box content"></div>
22  <div class="box content"></div>
23  <div class="box content"></div>
24  <div class="box content"></div>
25  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
26  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
27  <script>
28    "use strict";
29    function scroll() {
30      var $section = document.querySelectorAll(".content:not(.is-anim)");
31      if($section.length === null) {
32        return;
33      }
34      var AddClass = 'is-anim';
35      var controller = new ScrollMagic.Controller();
36      for(var i = 0; i < $section.length; i++) {
37        var scene = new ScrollMagic.Scene({
38          triggerElement: $section[i],
39          triggerHook: "onEnter",
40          reverse: false,
41          offset: 100
42        }).addTo(controller);
43        scene.on("enter", ()=> {
44　　　　　　console.log($section);
45          console.log($section[i]);
46          //$section[i].classList.add(AddClass);
47        });
48        scene.on("end", ()=> {
49          scene.destroy(true);
50        });
51      }
52    }
53    scroll();
54
55  </script>
56</body>
57</html>

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

回答1件

ベストアンサー

scene.on("enter", ()=> {...}はおそらくイベントだろうと思いますので、これが実行される時にはfor文は最後まで終わっており、変数iは$section.lengthになっています。$section[$section.length]には当然に要素がないのでundefinedとなります。

解決法は、ループの中に即時関数を書いてクロージャを作りiのその時点での値を持っておくか、forループをやめてNodeList.forEach()で書くのがいいかと思います。
NodeList - Web API インターフェイス | MDN

投稿2017/12/01 03:24

編集2017/12/01 03:25