[英]How can I return user to a specific div working with current code
我有一份包含12个部门的表格问卷。 第一个div
是显示块,其他div
显示无。 然后在点击时显示和隐藏div的标签功能。 最后一个div是对ajax调用加载的表单的回顾。 下面的代码工作正常,我想添加一个按钮,以便用户可以返回并回答未解答的问题
这段代码工作正常 ** $(document).ready(function(){var tab_pool = [“Q1”,“Q2”,“Q3”,“Q4”,“Q5”,“Q6”,“Q7”,“Q8”,“ Q9“,”Q10“,”Q11“,”Q12“]; var visible = $(”。tab:visible“)。attr('class')。split(”“)[1]; var curr_ind = $。 inArray(visible,tab_pool);
$('.next').click(function () {
$("#processing").show();
$.ajax({
type: "POST",
url: "process.php",
data: $('.data').serialize() + "&data=" + data,
success: function (data, status, xhr) {
if (xhr.getResponseHeader("DB_SUCCESS") == 1) {
$("#processing").hide();
} else {
$("#processing").hide();
alert("Save failed");
return false;
}
}
});
// There are conditions here such as if this then
// curr_ind = curr_ind + whatever to move to next relevant question
if (curr_ind < 11) {
$(".tab:visible").delay(750).hide(0);
$("#processing").delay(750).hide(0);
curr_ind = curr_ind + 1;
$("." + tab_pool[curr_ind]).delay(750).show(0);
$(".finished").delay(750).hide(0);
$(".back").delay(750).show(0);
}
// if the user has reached the end then below we show the review of questionaire
if (curr_ind === 11) {
$("#processing").delay(750).hide(0);
$(".finished").delay(750).show(0);
$.ajax({
type: "POST",
url: 'review.php',
data: "username=" + username,
success: function (data, status, xhr) {
if (xhr.getResponseHeader("DB_SUCCESS") == 1) {
$("#review").show();
$('#review').html(data);
} else {
alert("Review not available");
return false;
}
}
});
}
});
// after the first question a back button is display for
// user to go back to previous question
$('.back').click(function () {
if (curr_ind > 0) {
$(".tab:visible").hide();
// There ar conditions here so user is brought back to
// the right div and not one that was skipped from conditions above
$("." + tab_pool[curr_ind]).show();
document.getElementById(tab_pool[curr_ind]).checked=false;
$(".finished").hide();
$(".next").show();
}
if (curr_ind === 0) {
$(".back").hide();
}
});
结束工作代码**
// **** what I want here is a button for unanswered questions that will bring user
// back to that specific unaswered question
// I tried assigning a class and a numeric value to those buttons but
// for some reason I get a new blank page???
// I tried a few variations of the code below
function answerQ (value) {
var returnTo = value;
curr_ind = curr_ind - returnTo;
$(".tab:visible").hide();
$("." + tab_pool[curr_ind]).show();
document.getElementById(tab_pool[curr_ind]).checked=false;
$(".finished").hide();
$(".back").hide();
$(".next").show();
}
});
* *回到未回答问题的按钮样本
回答
最简单的可能是设置一个cookie。
另一种选择是设置localStorage或sessionStorage(如果你可以指望它们拥有现代浏览器)。
关于这个主题的一些阅读:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/ http://www.sitepoint.com/html5-web-storage/
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
您需要记住他们查看表单的次数。 您没有提到PHP,但是您将其作为标记,因此我假设您正在使用它。 您可以创建一个会话变量来存储用户查看页面/表单的次数。 (这个伪代码写得很晚,没有经过测试,但你应该能够获得它的主旨)
if (!isset($_SESSION['viewCnt']))
$_SESSION['viewCnt'] = 1;
else { //not the first time viewing the page/form, so increment counter and setup ajax
$_SESSION['viewCnt'] = $_SESSION['viewCnt']+1;
echo'
<script>
$(function() {
//do your ajax call here to fill div6
});
</script>
';
}
echo'
<div id="1" style="display:'.($_SESSION["viewCnt"] == 1 ? 'block' : 'none').';"></div>
<div id="2" style="display:none;"></div>
<div id="3" style="display:none;"></div>
<div id="4" style="display:none;"></div>
<div id="5" style="display:none;"></div>
<div id="6" style="display:'.($_SESSION["viewCnt"] == 1 ? 'none' : 'block').';"></div>
';
如果您不想使用会话变量,那么您可以使用cookie或HTML5网络存储: http : //www.w3schools.com/html/html5_webstorage.asp
注意:会话方法将重新开始,每次新的登录应用程序,cookie方法将根据其过期日期或用户清除其临时Internet文件时重新开始
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.