Question

在告诉你我的问题之前，Hava看一下这个例子： JSFIDDLE

现在，我尝试使用与所示相同的示例，但我使用列表从数据库中获取数据。但是，当我跑，它显示两个故事，如果我点击显示加载更多的新闻。什么都没发生。我被卡在那边。我尝试从 12小时 解决问题。

请帮帮我!!

查看我的源代码：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page language="java" import="java.sql.*" %>
<html>
    <head>
        <title>Title...</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <style>
#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                size_li = $("#myList li").size();
                x=3;
                $('#myList li:lt('+x+')').show();
                $('#loadMore').click(function () {
                    x= (x+5 <= size_li) ? x+5 : size_li;
                    $('#myList li:lt('+x+')').show();
                });
            });
</script>
    </head>
    <body>
<%
    try{
        Class.forName("com.mysql.jdbc.Driver");
        Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/news", "root", "1234");
        Statement st=con.createStatement();
        ResultSet rs=st.executeQuery("select * from main_news order by news_id desc");
            while(rs.next()){
                String my_news=rs.getString("my_news");
    %>
<div class="wpb_wrapper">
<section>

<ul id="myList">
    <li>
<!-- Here, would be my news.... -->
    <%=my_news %>
    </li>
</ul>
</section>
</div>
<%
            }
    }
    catch(Exception e){
        e.printStackTrace();
    }
%>
<div id="loadMore">Load more</div><br>


</body>
</html>

当然，帮助将不胜感激!!

Answer 1

根据jquery逻辑，你在计算$（＆＃34; #myList li＆＃34;）。size（）根据你的代码是1.所以当你点击loadmore时，检查逻辑是否在发现x大小超过size_li所以它没有做任何事情。

解决方案：您可以使用修改代码

<% for(int i = 0; i < my_news.size(); i++) { %>
   <li>      
       <%=my_news[i] %>
   </li>
   <%{ %>

你也可以使用jslt标签来编写代码。

jQuery从数据库加载更多新闻到页面

1 个答案: