javascript - 航路点 - 向此添加类不起作用(纯 javascript)

Question

我在一个项目中使用 Waypoints javascript 插件 ( http://imakewebthings.com/waypoints/ ) 来识别某些元素何时滚动到视口(viewport)中。你可以在这里看到我的项目:http://thomasgrist.co.uk/portfolio2017/work.html

随着每个 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 获取一个元素时，我可以添加一个类，但当我更喜欢它作为我需要的“this”时，则不能。

任何帮助将不胜感激。

干杯。托马斯。

Answer 1

根据 the manual使用 this.element 定位 dom 元素