Hey this is my first question on this website.
Im creating a webpage for a client, this page needs to be loaded in 1 time and the user can navigate throught the different parts of the website using arrows, these arrows will activate a jquery script that will switch the HTML of a page...
This is the Javascript i use:
<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>
And this is the html:
<div id="page">
<div id="pageInfo">
a
</div>
</div>
When i alert the variables i've set in Javascript i get the wished result, but when i alert:
alert($("#pageInfo").html());
i get 'null' as a result, oh and JQuery is included.
Can someone help me out with this information? Or did i miss essential parts. -edit: the rest of the HTML (sourcecode).
<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>
Greetings, Harm.
(im sorry if this question is already asked, but i dont know where to search for.)
您没有alert
$("#pageInfo").html()
,您的代码显示alert($(".pageInfo").html())
...
从您的顶部代码看, pageInfo
是类,因此您无法使用#pageInfo
警报, $("#pageInfo")
用于ID, $(".pageInfo")
用于类。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.