다음 앵커 목록이 작동하지 않습니다.

div 태그의 각 내용마다 앵커 태그 목록이 있습니다. 그러면로드되는 내용을 앞뒤로 이동할 수있는 컨트롤이 있습니다. 하지만 다음 또는 이전 형제에게 클릭()을 발생시킬 수는 없습니다.다음 앵커 목록이 작동하지 않습니다.

  var current; 
      var request = new XMLHttpRequest(); 
      request.open("GET", "EPUBS/" + localStorage.book, false); 
      if(request.overrideMimeType){ 
       request.overrideMimeType('text/plain; charset=x-user-defined'); 
      } 
      request.send(); 
      var file = request.responseText; 
      var zip = new JSZip(file); 
      var $content = $(zip.file(localStorage.selected + "/toc.ncx").asText()).find("navPoint"); 
      $content.each(function(){ 
       $('#navbar').append("<a href = '#' id = '" + $(this).children('content').attr('src') + "' > " + $(this).children('navLabel').children('text').text() + "</a><br/>"); 
      }); 

$("#navbar > a").click(function(event) { 
    event.preventDefault(); 
    var t2 = ($(this).attr('id')).split("#"); 
    var $tr = $(zip.file("6130/" + t2[0]).asText()); 
    document.getElementById('main').innerHTML = ""; 
    $('#main').append('<h1>' + $(this).text() + '</h1>'); 
    document.getElementById('main').innerHTML += $tr.text(); 
    current = t2;  
}); 

$("#prev").click(function(event) {  
    event.preventDefault(); 
    $('#' + current).prev().click();  
}); 

$("#next").click(function(event) {  
    event.preventDefault(); 
    $('#' + current).next().click();  
}); 

     <div id = 'navbar'> 
    </div> 

    <div id = 'main'> 
     <h1 id = 'mHeading'>Book</h1> 
     <img src = 'book.png' width = '500px'/> 
     <p id = "d"></p> 
    </div> 

    <div id = 'controls'> 
     <table> 
      <tr> 
       <td width = "12%"><a href = "#" id = "c1" onclick = "document.getElementById('main').style.color = 'black'; document.getElementById('main').style.backgroundColor = 'white';">black on white</a></td> 
       <td width = "12%"><a href = "#" id = "c2" onclick = "document.getElementById('main').style.color = 'white'; document.getElementById('main').style.backgroundColor = 'black';">white on black</a></td> 
       <td width = "10%"></td> 
       <td><a href = "#" id = "prev" ><</a></td> 
       <td><a href = "#" id = "next" >></a></td> 
       <td width = "5%"><a href = "#" id = "s1" style = "font-size: 12px" onclick = "document.getElementById('main').style.fontSize = '14px'">A</a></td> 
       <td width = "5%"><a href = "#" id = "s1" style = "font-size: 16px" onclick = "document.getElementById('main').style.fontSize = '16px'">A</a></td> 
       <td width = "5%"><a href = "#" id = "s1" style = "font-size: 20px" onclick = "document.getElementById('main').style.fontSize = '20px'">A</a></td> 
      </tr> 
     </table> 
    </div>

내가 잘못 쓰고 있습니까? 첫 번째 .click 함수가 완벽하게 작동합니다.

EDIT : 코드의 나머지 부분을 추가했지만로드 된 외부 파일이 많이 사용되지만 작동합니다. 다음 또는 이전 앵커에 추가 할 수 없습니다. 첫 번째 클릭 방법에서

출처

2013-04-10 Crossman

HTML에 'current'변수를 복사 할 수 있습니까? 또는 현재 솔루션의 jsFiddle을 만드십시오 - 실제로 진행되고있는 작업을 쉽게 파악할 수 있습니다. –

마지막 두 함수에서 현재은 정의되지 않습니다.

출처

2013-04-10 08:14:19 pedro

나는 내 코드의 시작 부분에서 현재를 선언했다. 나는 경고했고, 미안하다. – Crossman

자, $ ("#"+ current)가 유효한 객체인지 확인 하시겠습니까? – pedro

경고를 시도하십시오 ($ ('#'+ current) .html()); –

어쨌든 반환 된 ID가 String이어야하므로 split()이 필요하다고 생각하지 않습니다. 내가 사용하는 것이 :

current = $(this).attr('id');

나는이 정확히 어떻게 작동하는지 모르겠지만, 나는 당신이 그것을 선언 할 때 디폴트 값으로 현재 설정 가치가-책략을 것입니다 가정거야? (어떤 이유에서든 마지막 두 클릭 함수가 첫 번째 함수보다 먼저 호출되는 경우)

출처

2013-04-10 09:34:22

다음 앵커 목록이 작동하지 않습니다.

답변

관련 문제