Question

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

Answer 1

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

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

Answer 2

如 @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

Answer 3

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

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

元素属性ID返回undefined

3 个答案: