使用Ajax轻松实现无限滚动jQuery

Question

I am trying to do a really simple infinite scroll that checks in a .html file whenever the scroll is at the bottom, then loads the content of another .html file (which is more text). 我正在尝试做一个非常简单的无限滚动，只要滚动位于底部，便会检入.html文件，然后加载另一个.html文件（更多文本）的内容。

The second HTML file (the one that will be loaded whenever you scroll to the "limit" and make the "infinite scroll", is this one "Ej7.1.html": 第二个HTML文件（当您滚动到“限制”并进行“无限滚动”时将加载的文件）是该文件“ Ej7.1.html”：

<html>
    <body>
        <p> lorem ipsum etc etc etc </p>
    </body>
</html>

There are more <p> lorem ipsum with more text, but to make it shorter to read in here, I'm taking that out. <p> lorem ipsum带有更多的文本，但是为了使它在这里读起来更短，我将其删除。

And the first HTML file which I am trying to implement the jQuery version for is this one: 我尝试为其实现jQuery版本的第一个HTML文件是：

<!DOCTYPE html>
<html>
    <head>
        <script> src= "https://code.jquery.com/jquery-3.3.1.min.js" </script>
    </head>

    <script>
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() –    $(window).height()) {
            // Here goes the Ajax
                 $("body").load("Ej7.1");
            }
        });
    </script>

    <body>
        <h1> Pagina ej 7</h1>

        <p> lorem ipsum and a lot of text </p>
    </body>
</html>

So the error it gives me opening the html and pressing F12 is a syntax error in – $(window).height()) { as an unexpected identifier error. 因此，该错误使我打开html并按F12键是– $(window).height()) {中的语法错误，这是unexpected identifier错误。

I think I am having a syntax error, but I cannot seem to find what I am missing out nor doing wrong. 我认为我遇到语法错误，但是似乎找不到我遗漏的地方或做错了。

Answer 1

Your script tag is mis-formatted. 您的脚本标签格式错误。 Put the src attribute in the tag itself: 将src属性放入标签本身：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Answer 2

You're using the wrong character for minus. 您使用了错误的减号。

You're using – (char code: 8211). 您正在使用– （字符代码：8211）。 You should use - (char code: 45). 您应该使用- （字符代码：45）。 There could be something wrong with your keyboard or you copy pasted it from some non-properly formatted source. 您的键盘可能有问题，或者您从某些非正确格式的源复制粘贴了它。

Also, your jQuery inclusion tag won't work as spotted by @agmcleod . 另外，您的jQuery包含标签将无法使用@agmcleod发现的功能。

That line is basically doing this: 该行基本上是这样做的：

<script>
    src= "https://code.jquery.com/jquery-3.3.1.min.js"
</script>

If you console.log(src) on your page you'll see this: 如果您在页面上使用console.log(src) ，则会看到以下内容：

"https://code.jquery.com/jquery-3.3.1.min.js" . "https://code.jquery.com/jquery-3.3.1.min.js" 。

使用Ajax轻松实现无限滚动jQuery

问题描述

2 个解决方案

解决方案1
4 2018-03-23 12:24:59

解决方案2
1 已采纳 2018-03-23 12:29:02

使用Ajax轻松实现无限滚动jQuery

问题描述

2 个解决方案

解决方案1 4 2018-03-23 12:24:59

解决方案2 1 已采纳 2018-03-23 12:29:02

解决方案1
4 2018-03-23 12:24:59

解决方案2
1 已采纳 2018-03-23 12:29:02