2010-06-29 6 views
0

XML 파일에서 한 번에 10 개의 매거진을 표시하도록 개발중인 코드가 번거로 웠습니다. 나는 그것을 어느 정도 작동하고있다. 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(); 

가 시작 인덱스가 실제로 howMany보다 작다면, 그 시작 인덱스는이 호출 후 음수가 될 것입니다, 너무 이상한 보인다 구성되어 있는지?

그렇다면 Ajax 호출의 성공 이벤트 핸들러에 모든 코드를 포함시키는 것이 좋습니다. 나는이 것들을 다소 분리했을 것입니다. 그러나 아마도 당신은 이것을 시도하고 이것을 결정했습니다. 그것은 단지 생각입니다.

관련 문제