Question

此刻我有3页，按钮重定向到下一页。我想知道是否有一种方法，一旦我点击加载更多或点击页面底部加载下一页与以前加载的产品？忘了在每个页面上解释我有3个项目。所以我有什么方法可以添加一个按钮来自动加载接下来的3个<li>元素直到结束？这是我的代码：

 <ul>
    <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
</ul>

Answer 1

这是我们在点击加载下一页选项时可以继续的另一种方法

$(document).ready(function(){
  $("span.page1").click(function(){
     $("li.container2").load("page2.html");
  });
  $("span.page2").click(function(){
     $("li.container3").load("page3.html");
  });
});
<ul>
  <li class="container1">
    Continer content goes here
    <span class="page1">click here to load page 2</span>
  </li>
  <li class="container2">
  </li>
  <li class="container3">
  </li>
</ul>

我希望这很简单，不要忘记在

之前包含jquery库

加载更多并合并页面

1 个答案: