Question

我使用fullPage.js设置全高背景，如果当前幻灯片的背景较暗，我想使导航更改颜色。

我为深色幻灯片分配了一个类，更改幻灯片后，它将检查深色幻灯片的y位置，并根据视口中的幻灯片是否为深色来设置isDark变量。然后，应将类添加到导航中的链接，从而更改其外观。

afterLoad: function (origin, destination, direction) {
    deleteLog = true;

    // Dark slides  
    var isDark = false;
    var darkslides = document.querySelectorAll(".dark"),
    positions = [];

   Array.prototype.forEach.call(darkslides, function (app, index) {
        var positionInfo = app.getBoundingClientRect();

        positions.push(positionInfo);
        console.log("y position:" + positionInfo.y);

    if (positionInfo.y > -50 && positionInfo.y < 50) {
            console.log("It's in the viewport!");  
            isDark = true;
      }  

      if (isDark == true) {
        var navlinks = document.getElementsByClassName("navlink");
            for (var i = 0; i < navlinks.lenght; i++) {
            navlinks[i].classList.add("invert");
            }
          }

        else {
            console.log("It's not in the viewport :(");
      }
        });



        console.log("isDark:" + isDark);

  },

});

根据控制台日志，视口检查和isDark变量可以正常工作，navlinks变量看起来也不错（按预期返回元素列表），但是classList.add不添加任何类。

我在做什么错了？

JavaScript classList.add循环不起作用

0 个答案: