2010-06-29 17 views
0

我有一個麻煩,我正在開發一個代碼,以顯示10個正在從xml文件饋入的雜誌。我有它的工作在一定程度上,FF和IE7 + 8不喜歡它,也許因爲它說在第62行有一個錯誤 - 作爲調用數據被喂入的核心函數。從XML文件分頁的jQuery結果集問題

這是我的代碼:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="robots" content="noindex, nofollow" /> 
<title>Brave Creative - Online Archive</title> 
<link rel="stylesheet" href="css/global.css" media="screen" /> 
<script type="text/javascript" charset="UTF-8" src="js/jquery.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$.ajax({ 
    type: "GET", 
    url: "issues.xml", 
    dataType: "xml", 
    success: function(xml) { 

    var shelf = $('#shelf-items'); 
       var startIndex = 0; 
       var howMany = 10; 
       var $issues = $(xml).find('issue'); 
       var totalIssues = $issues.length; 
    var numPages = Math.ceil(totalIssues/howMany) 

    $('span.issuecount').html(+totalIssues+'&nbsp;Issues - '+numPages+'&nbsp;Pages'); 

       var displayIssues = function() { 
         var $issuesPaginated = $issues.slice(startIndex , (totalIssues - startIndex) + howMany); 
         $('#shelf-items li').fadeOut(500); 
         $issuesPaginated.each(function(){ 
          var id = $(this).attr('id'); 
          var date = $(this).find('date').text(); 
          var cover = $(this).find('cover').text(); 
          var issue = $(this).find('issuenumber').text(); 
          var url = $(this).find('url').text(); 
          $('<li id="'+id+'"></li>').html('<a href="'+url+'"><img src="images/covers/'+cover+'" alt="" /></a><br />'+date+' - #'+issue+'').fadeIn(500).appendTo(shelf); 
         }); 
       } 

       $('#prevIssueButton').click(function() { 
        if(startIndex < howMany) { 
         startIndex -= howMany; 
         displayIssues(); 
        }else { 
     startIndex = 0; 
         displayIssues(); 
     $('span.error').html('No Issues to Display - You are now on Page 1').fadeIn(300).fadeOut(3000); 
        } 
       }); 
       $('#nextIssueButton').click(function() { 
     if(startIndex + howMany <= totalIssues) { 
         startIndex += howMany; 
         displayIssues(); 
        }else { 
     $('span.error').html('No Issues to Display - You are now on Page 1').fadeIn(300).fadeOut(3000); 
         startIndex = 0; 
         displayIssues(); 

        } 
       }); 
       displayIssues().fadeIn(500); 
      } 
    }); // end ajax call 

}); // end document-ready 

</script> 
</head> 
<body> 

<div id="bc-publish"><span></span></div> 

<br /> 

<div id="wrapper"> 

<header> 
    <h1>Online Archive: <span>FSM</span></h1> 
</header> 

    <section id="buttons"> 

    <a href="#" id="prevIssueButton" title="Toggle Previous Entries">Previous</a> 
     <a href="#" id="nextIssueButton" title="Toggle Next Entries">Next</a> 

     <span class="error"><a></a></span> 

     <div class="clear"></div> 

    </section> <!-- /buttons --> 

    <section id="shelf"> 

    <ul id="shelf-items"></ul> 

     <div class="clear"></div> 

    </section> <!-- /shelf --> 
    <br /> 
    <span class="issuecount"></span> 

    <br /><br /> 

    <span class="logo"><a href="http://www.bravecreative.co.uk" title="Brave Creative"><img src="images/brave-creative-logo.jpg" alt="Brave Creative" /></a></span> 
    <span class="address"> 

    <span>t.</span> 01733 392978 <span>m.</span> 07719442825<br /> 
    <span>e.</span> [email protected]<br /> 
     4 Milnyard Square, Orton Southgate, Peterborough PE2 6CX 

    </span> 

    <div class="clear"></div> 

</div> <!-- /wrapper --> 

</body> 
</html> 

上一步和下一步按鈕不能正常工作,比如我點擊下一步,我去第2頁,再點擊下一步 - 它的空白,並單擊最後一次我被告知我沒有更多的結果查看。但是,如果我點擊上一步開始並返回3次(再次開始),然後單擊下一步我可以循環回到同一問題,這真的讓我感到困惑,任何幫助將深表感謝!

回答

0

只是讀你的代碼我有幾句話。

此:

$('span.issuecount').html(+totalIssues+'&nbsp;Issues - '+numPages+'&nbsp;Pages'); 

應該是沒有 '+' 才 'totalIssues',還是我失去了一些東西?

$('span.issuecount').html(totalIssues+'&nbsp;Issues - '+numPages+'&nbsp;Pages'); 

$('<li id="'+id+'"></li>').html('<a href="'+url+'"><img src="images/covers/'+cover+'" alt="" /></a><br />'+date+' - #'+issue+'').fadeIn(500).appendTo(shelf); 

結束似乎做事情的順序錯誤,不是嗎?先淡出然後appendTo?

$('#prevIssueButton').click(function() { 
       if(startIndex < howMany) { 
        startIndex -= howMany; 
        displayIssues(); 

看起來很奇怪也一樣,如果startIndex確實是小於的howmany,然後從startIndex將在調用後是負的,請問這是故意的嗎?

然後我不確定在Ajax調用的成功事件處理程序中擁有所有代碼是個好主意。我會分開這些東西,但也許你已經嘗試過,並決定這一點。這只是一個想法。