如何使用 jQuery 和 Waypoints 获取 $this 的 ID
Posted
技术标签:
【中文标题】如何使用 jQuery 和 Waypoints 获取 $this 的 ID【英文标题】：How do I grab the ID of $this using jQuery and Waypoints 【发布时间】：2017-02-15 12:44:15 【问题描述】：我正在尝试获取路点元素的 ID，然后在滚动到达该路点时将该 ID 值作为类添加到正文中。但这似乎不起作用。
HTML
<body class="bg-1">
<div id="content">
<div class="cover">
<h2>Title</h2>
<p class="keep-scrolling">Keep scrolling along</p>
</div>
<section class="stats">
<article id="bg-1">
/* stuff */
</article>
<article id="bg-2">
/* stuff */
</article>
<article id="bg-3">
/* stuff */
</article>
<article id="bg-4">
/* stuff */
</article>
</section>
</div>
</body>
Javascript
$(function()
$("article").waypoint(function(direction) //callback when waypoint is reached, with direction of scroll as a parameter
var $this = $(this); // caching the waypoint element
if($this.attr("id") == "bg-1")
$("body").removeClass();
$("body").addClass('bg-1');
else if($this.attr("id") == "bg-2")
$("body").removeClass();
$("body").addClass("bg-2");
else if($this.attr("id") == "bg-3")
$("body").removeClass();
$("body").addClass("bg-3");
else if($this.attr("id") == "bg-4")
$("body").removeClass();
$("body").addClass("bg-4");
else
$("body").addClass("bg-1");
;
);
);
我有多种获取 ID 的方法，但无法正确获取语法。
【问题讨论】：
【参考方案1】：你使用的航点回调函数错误。
参考API 这应该对你有用：
$(function()
$("article").waypoint(
handler: function(direction)
$("body").removeClass(function(index, css)
return (css.match(/(^|\s)bg-\S+/g) || []).join(' ');
);
//or $("body").removeClass();
$("body").addClass(this.element.id);
);
);
我对您的解决方案进行了更多调整：
从正文中删除所有以bg- 开头的类（参见this 答案以供参考）
将id 添加为类（删除了不必要的“if”结构）
Example
【讨论】：
这太好了，谢谢！但是，我确实读过this answer 关于.removeClass() 不需要参数。另外，我了解到from here 可以将处理程序选项作为第一个参数传递给航点。
@mapk 是的，您对 removeClass 之一是正确的。我搞砸了。但是处理函数中的$(this) 不包含航点。 'this' 是一个包含实际元素的航点对象。
感谢您的澄清。【参考方案2】：
mapk，您的 $this 与您的 jquery 选择器的响应有关，在您的情况下，它会检索文章元素的列表，并且您的算法正在威胁它作为一个单独的元素。
考虑在代码中使用 foreach
$(function()
$("article").waypoint(function(direction) //callback when waypoint is reached, with direction of scroll as a parameter
$(this).each(function(i,val)
var $this = $(val); // caching the waypoint element
if($this.attr("id") == "bg-1")
$("body").removeClass();
$("body").addClass('bg-1');
else if($this.attr("id") == "bg-2")
$("body").removeClass();
$("body").addClass("bg-2");
else if($this.attr("id") == "bg-3")
$("body").removeClass();
$("body").addClass("bg-3");
else if($this.attr("id") == "bg-4")
$("body").removeClass();
$("body").addClass("bg-4");
else
$("body").addClass("bg-1");
;
);
);
);
【讨论】：
以上是关于如何使用 jQuery 和 Waypoints 获取 $this 的 ID的主要内容，如果未能解决你的问题，请参考以下文章