jquery - 了解航点基础知识

Question

我正在尝试使用流行的“Waypoints”jQuery 库。我已经查看了各种示例和文档，但我正在努力掌握如何访问附加到航路点的元素。

为了更清楚地说明，我有几个属于 .nudgedown 类的页面部分。我想让它们在滚动到后更改背景颜色。我试图通过使用以下代码提醒其初始背景颜色来查看是否有任何功能正常工作:

$(".nudgedown").waypoint(function(){
    alert($(this).css("background-color"));
});

但是没有任何反应，在控制台中我收到此错误:

TypeError: b.ownerDocument is undefined

我做错了什么？我的方法在概念上是否遗漏了一些东西？预先感谢您的帮助。

Answer 1

您好，您尝试使用 $(this) 获取错误的元素。你可以试试这个:

$(document).ready(function(){
	var waypoints = $('.nudgedown').waypoint({
              handler: function(direction) {
              var el=$(this).get(0).element;
              console.log($(el).css("background-color"));
            }
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
<div style="background-color:blue; height:50px"></div>
<span class="nudgedown" style="background-color:red;">test</span>
<div style="background-color:green; height:800px"></div>

结果