在我的react代码中,我包含了一些jQuery代码,以使主页组件在滚动时淡入可见。它工作正常,但当我导航到另一个页面,如'所有职位'页面,然后试图滚动,它给出了一个错误说
Cannot read properties of undefined (reading 'top')
TypeError: Cannot read properties of undefined (reading 'top')
这个“top”来自检查元素位置的方法,如果它已经滚动到视图中,则前主页中的jQuery正在运行并影响新页面导致错误。
我试着在代码执行前检查条件语句和一行try catch代码,但它没有捕捉到这个特定的错误,条件语句也没有。我该怎么办?有没有更好的方法来编写jQuery代码来避免这个错误?jQuery代码可以在下面找到。
NB:这个错误通常在我刷新新页面时消失,但我觉得这是一个会影响用户体验的错误,需要修复。我想到的一个想法是将JavaScript操作限制在编写它的页面上,或者在导航到新页面时禁用旧页面的JavaScript,以防止以前页面的持久化JavaScript,在这种情况下,有什么方法可以做到这一点?
$(()=>{//jquery to make the homepage components become visible on scroll
try{
$(document).on("scroll", function() {
var pageTop = $(document).scrollTop();//get numerical value of top of page
var pageBottom = pageTop + $(window).height();//get numerical value of bottom of page
var tags = $(".icon-box");//select icon boxes
//this code makes the 'what we offer' icon boxes become visible on scroll
if ($(tags[0]).position().top){
for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
if ($(tag)?.position().top < pageBottom) {
$(tag).addClass("visible");
} else {
$(tag).removeClass("visible");
}
}}else{console.log('Not on Page')}
});}catch(err){console.log(err)}
});
2条答案
按热度按时间xzv2uavs1#
您可以检查页面上可用元素的长度(长度是具有特定选择器的元素的数量)。
示例代码:
或
您需要将部分代码放入另一个IF条件中,如下所示。
我希望这会有所帮助。
谢谢,吉格内什·拉瓦尔
ia2d9nvy2#
您可以稍微简化代码,但也可以在尝试访问第一个位置之前检查是否存在任何此类元素。
编辑:我有
forEach(
,这是我的语法错误-我可以使用这个原生JavaScript函数,但我们已经有了jQuery对象,所以我们可以使用.each()
引用:https://api.jquery.com/each/在本例中,
tags
为选择器$(".icon-box");
返回jQuery。each(
然后为这些元素中的每个元素(如果有的话)调用函数(function() {
,其中this
是ONE元素。我还使用了一个稍微更具描述性的
$(tags).first()
ref:https://api.jquery.com/first/如果出于某种原因,您需要索引,您可以使用此表单:
.each(function( index )
我加了一个恶心的元素来诱导滚动。