元素属性 ID 返回未定义答案

【问题标题】：element attribute ID return undefined元素属性 ID 返回未定义
【发布时间】：2015-06-13 09:06:37
【问题描述】：

当用户滚动到它时，我尝试使用waypoints.js 并激活菜单元素。如我所见，航点运行良好，但我无法获得当前部分id...控制台总是说undefined。

那么，我做错了什么？

我的脚本是：

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 是：

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

【问题讨论】：

我认为你的问题可能出在这一行` if (direction === "up") active_section = active_section.prev();` 这将改变元素，也许前一个元素没有身份证
↑↑↑ 在得到它的 ID 之前检查一下active_section 是什么。它是预期的元素吗？
@A. Wolff active_section 正确显示项目...但是如果我尝试获取其属性 ID，它会显示 undefined。 @AmmarCSE 我试图完全删除它，但有同样的问题......：/
@s.spirit 提供复制您的问题的示例，例如 jsFiddle
我可以测试它，它按预期工作，仅当home 是活动部分时返回undefined，然后前一个元素不是部分jsfiddle.net/voew4bjk

标签： javascript jquery jquery-waypoints

【解决方案1】：

在 waypoints.js 中，我发现 this 指的是航点内部对象。如果你 console.log 它，你很容易找到如何用 jquery 选择那个元素。

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

【讨论】：

好观察！

【解决方案2】：

正如 @AmmarCSE 所述，问题确实出在if (direction === "up") active_section = active_section.prev(); 上。基本上，如果前一个元素没有id，那么undefined 将在控制台中打印。避免这种情况的一种方法是检查前一个元素是否有id（检查并确保它不是undefined），然后才设置active_section，如下所示：

var prev_section_id = active_section.prev().attr("id");
if (direction === "up" && typeof prev_section_id != 'undefined') 
    active_section = active_section.prev();

Example Here

【讨论】：

我不知道，发生了什么，但仍然得到undefined。甚至删除if (direction === "up") active_section = active_section.prev(); 或尝试您的示例...：/
@s.spirit，看小提琴。他检查了前一个元素是否有 id。在小提琴中，它正在工作
@s.spirit 这很奇怪，我给出的示例与您在示例中给出的代码相同。 if (direction === "up... 和 home2 删除 home 应该在控制台中打印。当我有与你相同的代码时，我得到了 undefined 和 home。

【解决方案3】：

这对我有用，只是这不会返回 id

$('.section').waypoint(function(){alert('this.element.id');});

【讨论】：