元素属性ID返回undefined

时间:2015-06-13 09:06:38

标签: javascript jquery jquery-waypoints

当用户滚动到它时,我尝试使用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>

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

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

Example Here

答案 2 :(得分:0)

这对我有用,只有它不会返回ID

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