当用户滚动到它时,我尝试使用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>
答案 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();
答案 2 :(得分:0)
这对我有用,只有它不会返回ID
$('.section').waypoint(function(){alert('this.element.id');});