Jquery .html funktioniert nicht

Question

Hey, das ist meine erste Frage auf dieser Website.

Im Erstellen einer Webseite für einen Client, muss diese Seite in 1 Mal geladen werden und der Benutzer kann navigieren durch die verschiedenen Teile der Website mit Pfeilen, diese Pfeile aktivieren ein Jquery-Skript, das den HTML-Code von a Seite ...

Dies ist Javascript i verwenden:

<script type="text/javascript"> 
    function loadPage(div){ 
     if($("#page_"+div).length != 0){//if the page div exitst, else return false. 
      var image = $("#image_"+div).attr('src'); 
      var title = $("#title_"+div).html(); 
      var info = $("#info_"+div).html(); 
      $("#page").html('<img src="'+image+'" />'); 
      $("#title").html(title); 
      alert($("#pageInfo").html()); 
      return true; 
     }else{ 
      return false; 
     } 
    } 
    $(document).ready(function(){ 
     var div=1; 
     loadPage(div); 
     //<buttons> 
     $("#btnHome").click(function(){ 
      div = 1; 
      loadPage(div); 
     }); 
     $("#btnPrevious").click(function(){ 
      var success = loadPage((div-1)); 
      if(success == true){ 
       div--; 
      } 
     }); 
     $("#btnNext").click(function(){ 
      var success = loadPage((div+1)); 
      if(success == true){ 
       div++; 
      } 
     }); 
     $("#btnInfo").click(function(){ 
      $(".pageInfo").slideDown('fast'); 
     }); 
     $("#btnClose").click(function(){ 
      $(".pageInfo").slideUp('fast'); 
     }); 
     //</buttons> 
    }); 
</script> 

Und dies ist der html:

<div id="page"> 
    <div id="pageInfo"> 
     a 
    </div> 
</div> 

Wenn ich die Variablen i'v alarmieren e in Javascript gesetzt i das gewünschte Ergebnis zu erhalten, aber wenn ich aufmerksam gemacht:

alert($("#pageInfo").html()); 

i 'null' als Ergebnis erhalten, oh und JQuery ist im Preis inbegriffen.

Kann mir jemand mit diesen Informationen helfen? Oder habe ich wesentliche Teile vermisst. -edit: der Rest des HTML (Quellcode).

<div id="wrapper"> 



      <div class="pages" id="page_1"> 

       <h1 id="title_1">Startpunt</h1><img class="pagesImage" id="image_1" src="http://www.naviplan.nl/files/routefiles/1/1/67.jpg">    

       <div class="pagesInfo" id="info_1">INFO TEXT     <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a> 

       </div> 

      </div> 



      <div class="pages" id="page_2"> 

       <h1 id="title_2">Geen titel.</h1><img class="pagesImage" id="image_2" src="http://www.jomaverhuur.nl/wp-content/uploads/2011/02/no-image.gif">    

       <div class="pagesInfo" id="info_2">     <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a> 

       </div> 

      </div> 



      <div class="pages" id="page_3"> 

       <h1 id="title_3">Geen titel.</h1><img class="pagesImage" id="image_3" src="http://www.jomaverhuur.nl/wp-content/uploads/2011/02/no-image.gif">    

       <div class="pagesInfo" id="info_3">     <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a> 

       </div> 

      </div> 



      <div class="pages" id="page_4"> 

       <h1 id="title_4">Geen titel.</h1><img class="pagesImage" id="image_4" src="http://www.jomaverhuur.nl/wp-content/uploads/2011/02/no-image.gif">    

       <div class="pagesInfo" id="info_4">     <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a> 

       </div> 

      </div> 



      <div class="pages" id="page_5"> 

       <h1 id="title_5">Geen titel.</h1><img class="pagesImage" id="image_5" src="http://www.jomaverhuur.nl/wp-content/uploads/2011/02/no-image.gif">    

       <div class="pagesInfo" id="info_5">     <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a> 

       </div> 

      </div> 



      <div class="pages" id="page_6"> 

       <h1 id="title_6">Geen titel.</h1><img class="pagesImage" id="image_6" src="http://www.jomaverhuur.nl/wp-content/uploads/2011/02/no-image.gif">    

       <div class="pagesInfo" id="info_6">     <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a> 

       </div> 

      </div> 



      <div class="pages" id="page_7"> 

       <h1 id="title_7">Eindpunt</h1><img class="pagesImage" id="image_7" src="http://www.naviplan.nl/files/routefiles/1/17/finish56.png">    

       <div class="pagesInfo" id="info_7">     <a data-role="button" id="btnClose" href="#" data-icon="arrow-u">Sluiten</a> 

       </div> 

      </div> 

     <div data-role="header" data-position="inline" data-position="fixed" > 

    <a id="btnHome" href="#" data-icon="home">Homepage</a> 

    <h1 id="title"></h1> 

</div> 

Grüße, Harm.

(im sorry, wenn diese Frage schon gefragt ist, aber ich weiß nicht, wo zu suchen.)

Answer 1

Es scheint von Ihrem Code oben, dass pageInfo ist Klasse, so können Sie nicht mit #pageInfo Alarm, $("#pageInfo") wird für ID und $(".pageInfo") für Klasse verwendet.

Answer 2

Sie sind nicht alert$("#pageInfo").html() ing, Ihr Code sagt alert($(".pageInfo").html()) ...