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

Bootstrap 提供了很多有用的功能，我们通常将这些功能集成到我们的网站中。其中之一是“加载更多”功能，我们可以在我们访问的每个第二个网站上看到它。加载更多功能用于向访问者加载更多或在网页上显示更多可用内容。最初，一半的内容是隐藏的，访问者只能看到其中的一部分。而当点击加载更多按钮时，会出现剩余的内容。此功能还使网站看起来干净。这是一个非常酷的功能，您必须在您的网站上尝试。

方法：引导程序的加载更多功能可以通过在代码中包含特定脚本（如下所示）和一些 javascript 库来集成到网站上。该脚本根据切片函数将对应于特定类的所有元素划分为具有大小的部分，并在单击屏幕上的加载更多按钮时依次显示不同的部分。当大小变为零时，即没有更多元素被留下，它会显示文本“No more to view”。

让我们来看看如何集成的一步一步的实现 将加载更多功能逐步加载到网站中。

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

    $(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");
            }
        });
    }) 
 

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

例子：

HTML

  

    
        Load more function Example:2
    
  
    
    
  
    
    
  
    
        h1 {
            color: #3C8E3D;
        }
  
        .block {
            display: none;
            font-size: 20px;
        }
  
        #load {
            font-size: 20px;
            color: green;
        }
    

  

    
         GeeksforGeeks 
            Load more function
        
    
  
    
        
            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).
        
  
        
            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.
        
  
        
            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.
        
  
         
            Types of indexing in an array: 
            0 (zero-based indexing) 
            1 (one-based indexing) 
            n (n-based indexing)
        
    
      Load More 
  
    
        $(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");
                }
            });
        })
    

  

输出：

解释：在这个例子中，最初在输出中只有一个段落可见，并且每次点击加载更多按钮，都会出现一个连续的段落，这是因为在我们这次提到的切片函数中（0,1） 。