Question

我需要能够使用JQuery解析XML文件，当时显示3个帖子并且分页链接到其他帖子。

下面的代码中，我正在解析我从slashdot下载的本地XML文件。代码显示正确数量的帖子并创建指向分页的链接，但是当您单击分页链接时，它们由于某种原因不起作用。我仍然是一个JQuery n00b所以我有问题找出问题所在。好像JQuery没有一个非常好的调试工具？

P.S。您可以将http://slashdot.org/slashdot.xml下载到本地，以便您可以根据需要测试代码。

这是代码

<html>                                                                  
 <head>                                                                  
 <script type="text/javascript" src="jquery-1.6.4.js"></script>          
 <script type="text/javascript">             

    $(document).ready(function()
            {
              $.ajax({
                type: "GET",
                url: "slashdot.xml",
                dataType: "xml",
                success: parseXml
              });
            });  
            function parseXml(xml)
            {
              //find every story 
              var count = 0;
              $(xml).find("story").each(function()
              {
                  count++;
                  var title = $(this).find('title').text()
                  var url = $(this).find('url').text()

                  var fullLink = '<li><a href="'+url+'">' + title + '</a></li>';
                  //document.write('<a href="'+url+'">' + title + '</a><br/>');
                  $("#content").append(fullLink);
              });
              var show_per_page = 3;  
              var number_of_items = count;
              var number_of_pages = Math.ceil(number_of_items/show_per_page); 
              $('#current_page').val(0);
                $('#show_per_page').val(show_per_page);
                var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a> ';
                var current_link = 0; 
                while(number_of_pages > current_link){
                    navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
                    current_link++;
                } 
                navigation_html += '<a class="next_link" href="javascript:next();"> Next</a>';  
                $('#page_navigation').html(navigation_html); 
                $('#page_navigation .page_link:first').addClass('active_page'); 
                $('#content').children().css('display', 'none');
                $('#content').children().slice(0, show_per_page).css('display', 'block'); 
                function previous(){  

                    new_page = parseInt($('#current_page').val()) - 1;
                    //if there is an item before the current active link run the function
                    if($('.active_page').prev('.page_link').length==true){
                        go_to_page(new_page);
                    }  

                }  
                function next(){
                    new_page = parseInt($('#current_page').val()) + 1;
                    //if there is an item after the current active link run the function
                    if($('.active_page').next('.page_link').length==true){
                        go_to_page(new_page);
                    }  

                }
                function go_to_page(page_num){
                    //get the number of items shown per page
                    var show_per_page = parseInt($('#show_per_page').val());  

                    //get the element number where to start the slice from
                    start_from = page_num * show_per_page;  

                    //get the element number where to end the slice
                    end_on = start_from + show_per_page;  

                    //hide all children elements of content div, get specific items and show them
                    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');  

                    /*get the page link that has longdesc attribute of the current page and add active_page class to it
                    and remove that class from previously active page link*/
                    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');  

                    //update the current page input field
                    $('#current_page').val(page_num);
                }  

              //$("#content").append('count:' + count);

            }



 </script>                                                               
 </head>                                                                 
 <body>                                                                  
   <!-- we will add our HTML content here -->  

   <input type="hidden" id="current_page"></input>
   <input type="hidden" id="show_per_page"></input>

   <div id="content">
   </div>

   <div id="page_navigation"></div>

 </body>                                                                 
 </html>

Answer 1

首先，你的HTML无效。输入标记是自动关闭的，li项需要位于列表ul或ol内，而不是div元素。

<input type="hidden" id="current_page" />
<input type="hidden" id="show_per_page" />
<ul id="content"></ul>

其次，您的点击事件未得到处理，因为go_to_page，next和previous不在全球范围内。您应该创建这些元素并附加点击处理程序。

$("<a href='#'>Prev</a>").click(previous).appendTo("#page_navigation");
while (number_of_pages > current_link) {
    $("<a href='#' class='page_link'>").text(++current_link).click(go_to_page).appendTo("#page_navigation")
}
$("<a href='#'>Next</a>").click(next).appendTo("#page_navigation");

另一个提示，重新调整prev和next函数，只需单击上一页或下一页的编号即可。这样，this中的go_to_page始终指向分页链接。

function previous(e) {
    e.preventDefault(); //Don't follow the link
    $(".active_page").prev(".page_link").click();
}

function next(e) {
    e.preventDefault();
    $(".active_page").next(".page_link").click();
}

function go_to_page(e) {
    e.preventDefault();

    //Get the zero-based index instead of using an attribute
    var page_num = $(this).index(".page_link");

    //get the number of items shown per page
    var show_per_page = parseInt($('#show_per_page').val());

    //get the element number where to start the slice from
    start_from = page_num * show_per_page;

    //get the element number where to end the slice
    end_on = start_from + show_per_page;

    //hide all children elements of content div, get specific items and show them
    $('#content').children().hide().slice(start_from, end_on).show();

    //Since this always points to the page link, use that instead of looking for it
    $(this).addClass("active_page").siblings(".active_page").removeClass("active_page");

    //update the current page input field.  Don't need this anymore since we can use the .active_page class to identify it.
    //$('#current_page').val(page_num);
}

JSFiddle删除了AJAX部分。

JQuery中的分页问题

1 个答案: