Javascript 如何向问卷表单添加显示/隐藏
如何使每个问题都隐藏起来，直到单击上面的行图像。我基本上想在这个表单中添加一个show/hide div。当每个问题都得到回答时，“下一步”按钮会在最后弹出。如果用户决定改变主意并单击另一个答案或图像，则所有内容都会重新隐藏并再次显示内容。我已经创建了一个单独的测试表单，它可以工作，但它的功能是我想要的，所以现在我在这里。帮帮我Javascript 如何向问卷表单添加显示/隐藏,javascript,html,Javascript,Html,如何使每个问题都隐藏起来，直到单击上面的行图像。我基本上想在这个表单中添加一个show/hide div。当每个问题都得到回答时，“下一步”按钮会在最后弹出。如果用户决定改变主意并单击另一个答案或图像，则所有内容都会重新隐藏并再次显示内容。我已经创建了一个单独的测试表单，它可以工作，但它的功能是我想要的，所以现在我在这里。帮帮我 <!DOCTYPE html> <html> <head> <script type="text/j
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(window).load(function () {
$('.radio div').on('click', function () {
var $this = $(this),
$parent = $this.parent(),
value = $this.attr('value');
$parent.children().removeClass('active');
$this.addClass('active');
$parent.attr('value', value);
//get all selected radios
var q1 = $('div[name="q1"].active');
var q2 = $('div[name="q2"].active');
var q3 = $('div[name="q3"].active');
var q4 = $('div[name="q4"].active');
//make sure the user has selected all 3
if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0) {
//now we know we have 3 radios, so get their values
q1 = q1.attr('value');
q2 = q2.attr('value');
q3 = q3.attr('value');
q4 = q4.attr('value');
// activate button
$('#next_button').removeAttr('disabled');
//now check the values to display a different link for the desired
configuration
if (q1 == "AT&T" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
$('#next_button').val('att 8gb black').click(function () {
window.location.href = 'http://google.com/'
});
} else if (q1 == "AT&T" && q2 == "16GB" && q3 == "White" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://bing.com/';\">another option</input>";
} else if (q1 == "AT&T" && q2 == "16GB" && q3 == "Black" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
} else if (q1 == "AT&T" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
} else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
} else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://webs.com/';\">orange</input>";
} else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "White" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
} else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "Black" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
}
}
});
}); //]]>
</script>
</head>
<body class="questionnaire">
<form name="quiz" id='quiz'>
<h4>Choose your series.</h4>
<div class="radio" id="form">
<div style="list-style: none;" type="radio" name="q4" value="iPhone-3GS">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q4" value="iPhone-4">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q4" value="iPhone-4S">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
/>
</div>
</div>
<div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
/>
</div>
</div>
<div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
/>
</div>
</div>
<br />
<br />
<BR>
<h4>What carrier do you have?</h4>
<div class="radio" id="form">
<div style="list-style: none;" name="q1" value="AT&T">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/ATT-logo.png"
/>
</div>
<div style="list-style: none;" name="q1" value="Unlocked">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/Factory-Unlocked.png"
/>
</div>
</div>
<br />
<br />
<BR>
<h4>What is your phones capicity?</h4>
<div class="radio" id="form">
<div style="list-style: none;" type="radio" name="q2" value="8GB">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/8GB.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q2" value="16GB">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/16GB.png"
/>
</div>
</div>
<br />
<br />
<BR>
<h4>What color is your phone?</h4>
<div class="radio" id="form">
<div style="list-style: none;" type="radio" name="q3" value="iPhone-3GS">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q3" value="iPhone-4">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q3" value="iPhone-4S">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q3" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
/>
</div>
</div>
<br/>
<br />
<br />
<BR>
<BR>
<div id="linkDiv">
<input id="next_button" type="button" disabled="disabled" value="Next"
/>
</div>
</form>
</body>
</html>
$（窗口）。加载（函数（）{
$（'.radio div'）。在（'click'，函数（）{
变量$this=$（this），
$parent=$this.parent（），
value=$this.attr（'value'）；
$parent.children（）.removeClass（'active'）；
$this.addClass（'active'）；
$parent.attr（'value'，value）；
//获取所有选定的收音机
变量q1=$（'div[name=“q1”].active'）；
var q2=$（'div[name=“q2”].active'）；
变量q3=$（'div[name=“q3”].active'）；
变量q4=$（'div[name=“q4”].active'）；
//确保用户已选择所有3个选项
如果（q1.length！==0&&q2.length！==0&&q3.length！==0&&q4.length！==0）{
//现在我们知道我们有3台收音机，所以获取它们的值
q1=q1.attr（“值”）；
q2=q2.attr（“值”）；
q3=q3.attr（“值”）；
q4=q4.attr（“值”）；
//激活按钮
$（“#下一步按钮”）.removeAttr（'disabled'）；
//现在检查这些值以显示所需的不同链接
配置
如果（第一季度==“AT&T”&第二季度==“8GB”&第三季度==“黑色”&第四季度==“黑色”）{
$（“#下一个按钮”）.val（'att 8gb黑色'）。单击（函数（）{
window.location.href=http://google.com/'
});
}否则如果（q1==“AT&T”和q2==“16GB”和q3==“白色”和q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“另一个选项”；
}否则，如果（q1==“AT&T”&&q2==“16GB”&&q3==“黑色”&&q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“oops”；
}否则如果（q1==“AT&T”和q2==“8GB”和q3==“白色”和q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“不能”；
}否则，如果（q1==“解锁”和q2==“8GB”和q3==“白色”和q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“红色”；
}否则，如果（q1==“未锁定”&q2==“8GB”&q3==“黑色”&q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“橙色”；
}否则，如果（q1==“解锁”和q2==“16GB”和q3==“白色”和q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“绿色”；
}否则，如果（q1==“未锁定”&q2==“16GB”&q3==“黑色”&q4==“黑色”）{
document.getElementById（“linkDiv”）.innerHTML=“蓝色”；
}
}
});
}); //]]>
选择你的系列。
你们有哪家航空公司？
你的手机容量是多少？
你的手机是什么颜色的？
- 回答完所有问题后，设置一个标志
- 每次单击div时都要检查该标志
- 如果发现该标志已设置（即所有问题均已回答），则调用重置功能
- 在该重置功能中，重置问题
- 首先，html中有很多错误。div上有未关闭的标记、相同的id、type属性，但它应该位于输入字段中。除此之外，我的想法是将每个问题包装在一个div中，并在需要时显示/隐藏它。以下是代码：
var questions = $(".question");
var showQuestions = function(index) {
for(var i=0; i<questions.length; i++) {
if(i < index) {
questions.eq(i).css("display", "block");
} else {
questions.eq(i).css("display", "none");
}
}
}
for(var i=0; i<questions.length; i++) {
(function(index) {
questions.eq(index).find("div[type='radio']").on("click", function() {
showQuestions(index+2);
})
})(i);
}
showQuestions(1);
var-questions=$（“.question”）；
var showQuestions=函数（索引）{
对于（var i=0；请仅向我们显示相关代码。没有人会阅读整个内容，其中哪一部分是相关的？请输入您的代码，我怀疑type是否是div的有效属性。请您解释一下..@Prasannaarthi需要该类型，因为该图像是一个单选按钮；包含在脚本中。添加后，它将禁用我的Formh，然后现在，用户可以单击问题了
var questions = $(".question");
var showQuestions = function(index) {
for(var i=0; i<questions.length; i++) {
if(i < index) {
questions.eq(i).css("display", "block");
} else {
questions.eq(i).css("display", "none");
}
}
}
for(var i=0; i<questions.length; i++) {
(function(index) {
questions.eq(index).find("div[type='radio']").on("click", function() {
showQuestions(index+2);
})
})(i);
}
showQuestions(1);
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.radio div[type='radio'] {
background: url($image) no-repeat #eee;
height:55px;
width:60px;
border:1px solid #DDD;
border-radius:10px;
padding:1px;
float:left;
margin-right:10px;
cursor:pointer
}
.radio div.active{
box-shadow:0 0 2px 1px #00f inset;
}
img {
width: 60px;
height: 55px;
border: 0px solid #666;
background: #fff;
display:block;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.question {
margin: 20px 0 20px 0;
display: none;
clear: both;
}
#linkDiv {
margin: 0;
}
.clear {
clear: both;
}
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.radio div').on('click', function() {
var $this = $(this),
$parent = $this.parent(),
value = $this.attr('value');
$parent.children().removeClass('active');
$this.addClass('active');
$parent.attr('value', value);
//get all selected radios
var q1=$('div[name="q1"].active');
var q2=$('div[name="q2"].active');
var q3=$('div[name="q3"].active');
var q4=$('div[name="q4"].active');
//make sure the user has selected all 3
if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0)
{
//now we know we have 3 radios, so get their values
q1=q1.attr('value');
q2=q2.attr('value');
q3=q3.attr('value');
q4=q4.attr('value');
// activate button
$('#next_button').removeAttr('disabled');
//now check the values to display a different link for the desired configuration
if (q1=="AT&T" && q2=="8GB" && q3=="Black" && q4=="Black")
{
$('#next_button').val('att 8gb black').click(function() {
window.location.href='http://google.com/' } );
}
else if (q1=="AT&T" && q2=="16GB" && q3=="White" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://bing.com/';\">another option</input>";
}
else if (q1=="AT&T" && q2=="16GB" && q3=="Black" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
}
else if (q1=="AT&T" && q2=="8GB" && q3=="White" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
}
else if (q1=="Unlocked" && q2=="8GB" && q3=="White" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
}
else if (q1=="Unlocked" && q2=="8GB" && q3=="Black" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://webs.com/';\">orange</input>";
}
else if (q1=="Unlocked" && q2=="16GB" && q3=="White" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
}
else if (q1=="Unlocked" && q2=="16GB" && q3=="Black" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
}
}
});
var questions = $(".question");
var showQuestions = function(index) {
for(var i=0; i<questions.length; i++) {
if(i < index) {
questions.eq(i).css("display", "block");
} else {
questions.eq(i).css("display", "none");
}
}
}
for(var i=0; i<questions.length; i++) {
(function(index) {
questions.eq(index).find("div[type='radio']").on("click", function() {
showQuestions(index+2);
})
})(i);
}
showQuestions(1);
});//]]>
</script>
</head>
<body class="questionnaire">
<form name="quiz" id='quiz'>
<div class="question">
<h4>Choose your series.</h4>
<div class="radio" id="form">
<div type="radio" name="q4" value="iPhone-3GS">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png" />
</div>
<div type="radio" name="q4" value="iPhone-4">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png" />
</div>
<div type="radio" name="q4" value="iPhone-4S">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png" />
</div>
<div type="radio" name="q4" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
</div>
<div type="radio" name="q4" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
</div>
<div type="radio" name="q4" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
</div>
</div>
</div>
<br class="clear" />
<div class="question">
<h4>What carrier do you have?</h4>
<div class="radio" id="form">
<div type="radio" name="q1" value="AT&T">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/ATT-logo.png" />
</div>
<div type="radio" name="q1" value="Unlocked">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/Factory-Unlocked.png" />
</div>
</div>
</div>
<br class="clear" />
<div class="question">
<h4>What is your phones capicity?</h4>
<div class="radio" id="form">
<div type="radio" name="q2" value="8GB">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/8GB.png" />
</div>
<div type="radio" name="q2" value="16GB">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/16GB.png" />
</div>
</div>
</div>
<br class="clear" />
<div class="question">
<h4>What color is your phone?</h4>
<div class="radio" id="form">
<div type="radio" name="q3" value="iPhone-3GS">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png" />
</div>
<div type="radio" name="q3" value="iPhone-4">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png" />
</div>
<div type="radio" name="q3" value="iPhone-4S">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png" />
</div>
<div type="radio" name="q3" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png" />
</div>
</div>
</div>
<br class="clear" />
<div id="linkDiv">
<input id="next_button" type="button" disabled="disabled" value="Next" />
</div>
</form>
</body>
</html>