Waypoints - 将类添加到此不工作（纯javascript）

我在项目中使用Waypoints javascript插件（http://imakewebthings.com/waypoints/）来确定某些元素何时滚动到视口中。你可以在这里看到我的项目：http://thomasgrist.co.uk/portfolio2017/work.html Waypoints - 将类添加到此不工作（纯javascript）

由于每个Waypoint滚动我试图添加一个类。

我没有使用JQuery。

HTML：

<div id="projects" class="dragscroll"> 

    <div id="project1" class="projects"> 
     <div id="clientTypeTopContainer"> 
      <div id="clientTypeTop">MASTERCARD</div> 
     </div> 
     <img data-original="img/project1.jpg" id="project1Image" class="projectImage"> 
     <div id="project2Title" class="projectTitle">Advanced New Passat<br/>campaign site</div> 
    </div> 

    <div id="project2" class="projects"> 
     <div id="clientTypeTopContainer" class="clientTypeTopContainerBottom"> 
      <div id="clientTypeTop">MASTERCARD</div> 
     </div> 
     <img data-original="img/project2.jpg" id="project2Image" class="projectImage"> 
     <div id="project2Title" class="projectTitle">Advanced New Passat<br/>campaign site</div> 
    </div> 

</div>

JS：

var continuousElements = document.getElementsByClassName('projects') 

for (var i = 0; i < continuousElements.length; i++) { 
    new Waypoint({ 
     element: continuousElements[i], 
     handler: function() { 
      //alert('helloworld'), 
      this.disable(), 
      this.className +=' projectFadeIn'; 
     }, 
     context: document.getElementById('projects'), 
     horizontal: true 
    }) 
}

我觉得这是不工作了过去：

this.className +=' projectFadeIn';

当我的ID，我得到一个元素可以添加一个类，但不是当我预先将它作为我需要的“这个”。

任何帮助将不胜感激。

干杯。托马斯。

来源

2017-05-07 user1951962

未经测试，但你可以使用classList

this.classList.add("projectFadeIn");

来源

2017-05-07 13:55:56 brk

按the manual使用this.element目标的DOM元素

来源

2017-05-07 14:13:52 yezzz

你的意思this.element.className + = 'projectFadeIn' 试试这样; ？ – user1951962

是的，类似的东西 – yezzz

这是将类应用于容器中的第一个div，而不是当前正在滚动到视口中的div。有任何想法吗？ – user1951962

Waypoints - 将类添加到此不工作（纯javascript）

回答

相关问题