了解 waypoints 基础知识
Understanding waypoints basics
我正在尝试使用流行的 "Waypoints" jQuery 库。我看过各种示例和文档,但我很难掌握如何访问附加到航路点的元素。
为了更清楚,我有几个属于 .nudgedown
class 的页面部分。我想让它们在滚动到后更改背景颜色。我试图通过使用以下代码提醒他们的初始背景颜色来查看是否有任何工作:
$(".nudgedown").waypoint(function(){
alert($(this).css("background-color"));
});
但是没有任何反应,在控制台中我收到此错误:
TypeError: b.ownerDocument is undefined
我做错了什么?我在我的方法中是否在概念上遗漏了什么?在此先感谢您的帮助。
您好,您尝试使用 $(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>
结果
我正在尝试使用流行的 "Waypoints" jQuery 库。我看过各种示例和文档,但我很难掌握如何访问附加到航路点的元素。
为了更清楚,我有几个属于 .nudgedown
class 的页面部分。我想让它们在滚动到后更改背景颜色。我试图通过使用以下代码提醒他们的初始背景颜色来查看是否有任何工作:
$(".nudgedown").waypoint(function(){
alert($(this).css("background-color"));
});
但是没有任何反应,在控制台中我收到此错误:
TypeError: b.ownerDocument is undefined
我做错了什么?我在我的方法中是否在概念上遗漏了什么?在此先感谢您的帮助。
您好,您尝试使用 $(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>
结果