javascript - 元素属性ID返回未定义

Question

我尝试使用waypoints.js并在用户滚动到菜单元素时使菜单元素处于事件状态。正如我所看到的，航路点运行良好，但我无法获取当前部分id...控制台总是说未定义。

那么，我做错了什么？

我的脚本是:

jQuery(function() {
    var sections = jQuery('section');
    var navigation_links = jQuery('nav a');

    sections.waypoint({
    handler: function(direction) {
        var active_section;
        active_section = jQuery(this);
        if (direction === "up") active_section = active_section.prev();
        var active_link = jQuery('nav a[href="#' + active_section.attr("id") + '"]');
        navigation_links.parent().removeClass("active");
        active_link.parent().addClass("active");
        active_section.addClass("active-section");
        console.log(active_section.attr("id"))
    },
    offset: '35%'
    });
});

我的 HTML nav 是:

<ul class="nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#spec">What we do</a></li>
    <li><a href="#features">Features</a></li>
    <li><a href="#tools">Tools</a></li>
    <li><a href="#contacts">Contacts</a></li>
</ul>

我的 HTML 部分是:

<section id="home">
    <div class="wrap">
        <h1>...</h1>
    </div>
</section>

Answer 1

在 waypoints.js 中，我发现 this 引用了一个 waypoints 内部对象。如果你console.log它，你很容易找到如何使用jquery选择该元素。

handler: function (direction){
    var DOMElement = $(this.element);
    console.log($(this.element).attr('data-id');
}