几个HTML文件上的页面特定JavaScript函数

我有大约10页HTML，每页都有一个指向indexJS.js的链接。我在js文件中有一个函数loadMoreOnScroll()，它只为我的index.html运行。但是当用户滚动到底部时，loadMoreOnScroll()会在所有页面上运行。

如何限制loadMoreOnScroll()仅为index.html运行？

添加类来区分页面。

<body class="index">...

使用JavaScript:

if(document.body.className.match(/bindexb/)){
    // code
}

jQuery的

if($("body").hasClass("index")){
    // code
}

在索引上的body标记中添加一个类，然后在javascript中可以执行类似的操作

if(document.querySelector('body').className === 'myclass'){
 loadMoreOnScroll();
}

注意：这是假设您的主体上没有其他类。您可以使用数据属性并执行getAttribute('data-page')或类似效果的操作。

您只需从indexJS中删除loadMoreOnScroll（

我假设您正在从indexJS.js文件中调用loadMoreOnScroll，对吗？

如果是这样的话，解决方案是从javascript文件中删除函数调用，而是直接从index.html中调用它

indexJS.js

// Create the function but don't call it here
function loadMoreOnScroll(){...}

index.html

<script src="indexJS.js></script>
<script>
    // call the function
    loadMoreOnScroll();
</script>

编辑：

其他一些人建议添加一个body类，并以这种方式定位您的页面。这种方法很好，在许多情况下都可以很好地工作，但请记住两件事：

换句话说，body类将具有绑定到它的功能，如果您只查看HTML，这些功能不会立即显现出来。如果你自己处理代码，你可能会没事，但在团队环境中，它可能很容易出错。（或者，如果您在几个月后重新访问代码）。这完全取决于你的项目范围。

相关内容