如何使用jQuery加载更多的功能

Bootstrap提供了很多有用的功能，我们一般都会将其整合到我们的网站中。其中之一是 “加载更多 “功能，我们可以在我们访问的每一个网站上看到。加载更多的功能是用来加载更多的或显示更多的网页上的可用内容给访问者。最初，一半的内容是隐藏的，只有一部分内容对访问者是可见的。而当点击加载更多按钮时，剩下的内容就会出现。这个功能也使网站看起来很干净。这是一个相当酷的功能，你必须在你的网站上尝试。

方法： bootstrap的加载更多功能可以通过在代码中加入一个特定的脚本（如下所示）和一些javascript库来集成到网站上。这个脚本将所有的元素对应于一个特定的类，根据切片功能分成不同的部分，并在点击屏幕上的加载更多按钮时一个接一个的显示不同的部分。当大小变成零时，即没有更多的元素了，它就会显示 “没有更多可以查看 “的文字。

让我们看看如何一步一步地将 “加载更多 “功能整合到网站中的实施过程。

第1步：你只需要在你的网站上包含以下脚本，使 “加载更多 “按钮发挥作用。这里，.block是HTML代码中的项目类别，我们将在其上应用加载更多功能，#load是加载更多按钮的ID。

<script >
     $(document).ready(function() {$ (".block").slice(0, 2).show();
        if ( $(".block:hidden").length != 0) {$ ("#load").show();
        }
         $("#load").on("click", function(e) { e.preventDefault();$ (".block:hidden").slice(0, 2).slideDown();
            if ( $(".block:hidden").length == 0) {$ ("#load").text("No More to view").fadOut("slow");
            }
        });
    }) 
</script>

第2步：还需要在你的HTML文件中包括以下javascript库，作为脚本。

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>

示例:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Load more function Example:2
    </title>
  
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
  
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </script>
  
    <style>
        h1 {
            color: #3C8E3D;
        }
  
        .block {
            display: none;
            font-size: 20px;
        }
  
        #load {
            font-size: 20px;
            color: green;
        }
    </style>
</head>
  
<body>
    <h1 align="center">
        <b> GeeksforGeeks <br>
            <u>Load more function</u>
        </b>
    </h1>
  
    <div class="container">
        <div class="block">
            An array is a collection of items stored
            at contiguous memory locations.The idea 
            is to store multiple items of the same 
            type together. This makes it easier to 
            calculate the position of each element 
            by simply adding an offset to a base 
            value, i.e., the memory location of the 
            first element of the array (generally 
            denoted by the name of the array).
        </div>
  
        <div class="block">
            The base value is index 0 and the 
            difference between the two indexes is 
            the offset. For simplicity, we can
            think of an array as a fleet of stairs 
            where on each step is placed a value 
            (let’s say one of your friends). Here, 
            you can identify the location of any of 
            your friends by simply knowing the count 
            of the step they are on.
        </div>
  
        <div class="block">
            In C language, array has a fixed size 
            meaning once the size is given to it, 
            it cannot be changed i.e. you can’t
            shrink it neither can you expand it. 
            The reason was that for expanding, if 
            we change the size we can’t be sure
            ( it’s not possible every time) that we 
            get the next memory location to us as free.
        </div>
  
        <div class="block"> <br>
            Types of indexing in an array: <br>
            0 (zero-based indexing) <br>
            1 (one-based indexing) <br>
            n (n-based indexing)
        </div>
    </div>
    <div id="load"> <b> Load More </b></div>
  
    <script>
         $(document).ready(function () {$ (".block").slice(0, 1).show();
            if ( $(".block:hidden").length != 0) {$ ("#load").show();
            }
             $("#load").on("click", function (e) { e.preventDefault();$ (".block:hidden").slice(0, 1).slideDown();
                if ( $(".block:hidden").length == 0) {$ ("#load").text("No More to view")
                        .fadOut("slow");
                }
            });
        })
    </script>
</body>
  
</html>

输出:

如何使用jQuery加载更多的功能？