本文介绍了如何使用HTML和jquery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js">
</script>
<script src="my.js">
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="removed" style="padding: 15px">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Number <input type="text" value="00" id="txtrid" />
</li>
<li id="imgloding" style="display:none;">
<img src="http://webapps.knust.edu.gh/payroll/images/LoadingWait.gif" />
Please wait
</li>
</ul>
<a data-role="button" data-transition="fade" data-theme="a" href="#page1">
data-icon="arrow-r" data-iconpos="right" önclick="getData();">
Button
</a>
</div>
</div>
<!-- Start of second page -->
<div data-role="page" id="pleasewait">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="removed" style="padding: 15px" id="QLoder">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li>
<img src="http://webapps.knust.edu.gh/payroll/images/LoadingWait.gif" />
Please wait
</li>
</ul>
</div>
<div data-role="removed" style="padding: 15px;display:none;" id="QcontentM">
<table style="width:100%">
<tr>
<td style="width:20px">
Q :
</td>
<td id="lblQM"></td>
</tr>
<tr>
<td style="width:20px">
<input type="checkbox" önclick="M_setMyans(1);" id="chkansm1"/>
</td>
<td id="lblansm1" style="padding-removed11px">Ans 1</td>
</tr>
<tr>
<td style="width:20px">
<input type="checkbox" önclick="M_setMyans(2);" id="chkansm2"/>
</td>
<td id="lblansm2" style="padding-removed11px">Ans 2</td>
</tr>
<tr>
<td style="width:20px">
<input type="checkbox" önclick="M_setMyans(3);" id="chkansm3"/>
</td>
<td id="lblansm3" style="padding-removed11px">Ans </td>
</tr>
<tr>
<td style="width:20px">
</td>
<td id="lblansm4"></td>
</tr>
<tr>
<td colspan="2">
<a data-role="button" data-transition="fade" önclick="CheckMyAns();">
Done
</a>
</td>
</tr>
</table>
</div>
</div><!-- /page -->
<input type="hidden" id="hdnid" value="0" />
<input type="hidden" id="QID" value="0" />
<input type="hidden" id="Lock" value="0" />
<input type="hidden" id="IsDone" value="1" />
<input type="hidden" id="tueans" value="1" />
<input type="hidden" id="myans" value="" />
<script>
$("#QLoder").show(1);
function CheckMyAns() {
var istrue = 'false';
if ($('#myans').val() == $('#tueans').val()) {
//alert("good work!");
istrue = 'true';
}
$.ajax({
type: "POST",
url: "demo.asmx/M_SavemyAns",
data: "{SID:'" + $('#hdnid').val() + "',QID :'" + $('#QID').val() + "',StudentAns :'" + $('#myans').val() + "',IsTrue :'" + istrue + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert("good work!");
var _data = response.d;
$("#QcontentM").hide("slow");
$("#QLoder").show(1);
$('#Lock').val("0")
$('#IsDone').val("1")
//REST CHECK BOX
$('input:checkbox').attr('checked', 'checked');
$(this).val('uncheck all')
chk();
CheckQz();
//$('#hdnid').val(_data);
// alert(_data);
// $("#imgloding").hide("slow");
// window.setInterval(CheckQz, 10000);
// window.location.href = "#pleasewait";
}
});
}
function chk() {
if ($(this).attr('checked')) {
$('input:checkbox').attr('checked', true);
}
else {
$('input:checkbox').attr('checked', false);
}
}
function CheckQz() {
if ($('#IsDone').val() == "1") {
// alert("start");
getQz()
}
}
function getQz() {
if ($('#Lock').val() == "0") {
$('#Lock').val("1")
$.ajax({
type: "POST",
url: "demo.asmx/M_Qz",
data: "{SID:'" + $('#hdnid').val() + "',QID :'" + $('#QID').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var _data = response.d;
//alert(_data.length);
if (response.d.length == 0) {
$("#QLoder").show(1);
$("#QcontentM").hide("slow");
}
$.each(_data, function (index, _userlist) {
$('#IsDone').val("0")
$('#QID').val(_userlist.QID)
// alert(_userlist.QID);
if (_userlist.QTyoe == "M") {
$("#lblQM").html(_userlist.Qname);
$("#lblansm1").html(_userlist.Ans1);
$("#lblansm2").html(_userlist.Ans2);
$("#lblansm3").html(_userlist.Ans3);
$('#tueans').val(_userlist.TrueAns)
$("#QcontentM").show(1);
$("#QLoder").hide("slow");
}
//alert(_userlist.QID);
// $("#datalits").append("<li class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" data-theme="c" data-corners="false" data-shadow="false" data-iconshadow="true" data-iconsize="18" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a class="ui-link-inherit" data-transition="slide" href="app.html?id=" _userlist.id=""> " + _userlist.Name + " </a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow ui-iconsize-18"> </span></div></li>");
});
}
});
$('#Lock').val("0")
}//end lock if
}
function M_setMyans(chkID) {
if ($('#chkansm' + chkID).is(':checked')) {
//alert($("#lblansm" + chkID).html());
$('#myans').val($("#lblansm" + chkID).html())
}
// else {
// $("#txtAge").hide();
// }
}
</script>
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="removed" style="padding: 15px">
<a data-role="button" data-transition="fade" data-theme="b" href="#page1">
Button
</a>
</div>
</div><!-- /page -->
<script>
function getData() {
$("#imgloding").show(1);
$.ajax({
type: "POST",
url: "demo.asmx/M_checkRoom",
data: "{RID:'" + $('#txtrid').val() + "',Name :'N/A'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var _data = response.d;
$('#hdnid').val(_data);
// alert(_data);
$("#imgloding").hide("slow");
window.setInterval(CheckQz, 10000);
window.location.href = "#pleasewait";
}
});
}
</script>
</body>
</html>推荐答案
这篇关于如何使用HTML和jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！