基本上，我想用一些单选按钮选项显示一个问题。单击一个按钮时，一个新问题会在第一个按钮下面弹出（特定于所选答案），并带有一组新的单选按钮。
当点击此组中的答案时，下面会弹出另一个问题（特定于此处选择的答案），依此类推。
如果用户决定选择任何先前的单选按钮，我希望隐藏该按钮后面的所有内容（与答案无关）。
我最终选择的所有选项都会留在页面上，即使选择了不同的选项（不同的选项只是添加到列表中......）或者，只有最新的问题会保留在页面上页面，使得无法对先前的问题进行不同的选择...
这就是我现在所拥有的：
$(document).ready(function(){
$("input[name$='group1']").click(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
}); .desc { display: none; }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic jQuery Quiz Demo Page</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Troubleshooting</h1>
<h2>What needs to be fixed?</h2>
<form>
<div><label><input type="radio" name="group1" value="in1">Internet</label></div>
<div><label><input type="radio" name="group1" value="tv1">TV</label></div>
<div><label><input type="radio" name="group1" value="ph1">Phone</label></div>
</form>
<div id="in1" class="desc">
<h3>Internet Troubleshooting</h3>
<h3>Are there lights on the router?</h3>
<form>
<div><label><input type="radio" name="group1" value="in2">Yes</label></div>
<div><label><input type="radio" name="group1" value="in3">No</label></div>
</form>
</div>
<div id="in2" class="desc">
<h3>Is the power light red?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in3" class="desc">
<h3>Is the router plugged in?</h3>
<form>
<div><label><input type="radio" name="group1" value="in6">Yes</label></div>
<div><label><input type="radio" name="group1" value="in7">No</label></div>
</form>
</div>
<div id="in4" class="desc">
<h3>Failing Device</h3>
<p>A red power light most likely indicates the device is not functioning properly. Contact your ISP.</p>
</div>
<div id="in6" class="desc">
<h3>Plug the router into another outlet. Is the power light on?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in7" class="desc">
<h3>Please plug in your router and try again once the router has fully started up. (Note: This process may take up to 5 minutes)</h3>
</div>
<div id="tv1" class="desc">
<h1>TV Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="tv2">opt1</label></div>
<div><label><input type="radio" name="group1" value="tv3">opt2</label></div>
<div><label><input type="radio" name="group1" value="tv4">opt3</label></div>
</form>
</div>
<div id="ph1" class="desc">
<h1>Phone Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="ph2">opt1</label></div>
<div><label><input type="radio" name="group1" value="ph3">opt2</label></div>
<div><label><input type="radio" name="group1" value="ph4">opt3</label></div>
</form>
</div>
</body>
</html>
答案 0 :(得分：0)
执行此操作的最佳方法是在单独的Javascript文件中定义问题和答案，并动态生成测验表单。
但是说你不想这样做 - 这是你用HTML（略微调整）和Javascript来实现这一目标的一种方式：
$(document).ready(function(){
$("input[name$='group1']").click(function() {
var test = $(this).val();
if (test[2] == '1') {
// Check whether this is a top-level question, and if so,
// hide all the subquestions (and uncheck responses)
$('.desc').hide();
$('input').not('[value='+test+']').removeAttr('checked');
} else {
// Find the ID of this question
var parent_q = $($(this).parents('.desc')[0]).attr('id');
var type = parent_q.substring(0,2); // Get the type, such as "in"
var level = parent_q.substring(2); // Get the level, such as 1
$(".desc").each(function(elt_index, elt) {
// Hide each question/answer with either a different type or a higher ID.
var e_id = $(elt).attr('id');
if(e_id.substring(0,2) != type || e_id.substring(2) > level) {
$(elt).hide();
$(elt).children('input').removeAttr('checked');
}
});
}
$("#"+test).show();
});
}); .desc { display: none; }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic jQuery Quiz Demo Page</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Troubleshooting</h1>
<h2>What needs to be fixed?</h2>
<form>
<div><label><input type="radio" name="group1" value="in1">Internet</label></div>
<div><label><input type="radio" name="group1" value="tv1">TV</label></div>
<div><label><input type="radio" name="group1" value="ph1">Phone</label></div>
</form>
<div id="in1" class="desc">
<h3>Internet Troubleshooting</h3>
<h3>Are there lights on the router?</h3>
<form>
<div><label><input type="radio" name="group1" value="in2">Yes</label></div>
<div><label><input type="radio" name="group1" value="in3">No</label></div>
</form>
</div>
<div id="in2" class="desc">
<h3>Is the power light red?</h3>
<form>
<div><label><input type="radio" name="group1" value="in8">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in3" class="desc">
<h3>Is the router plugged in?</h3>
<form>
<div><label><input type="radio" name="group1" value="in6">Yes</label></div>
<div><label><input type="radio" name="group1" value="in7">No</label></div>
</form>
</div>
<div id="in6" class="desc">
<h3>Plug the router into another outlet. Is the power light on?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in7" class="desc">
<h3>Please plug in your router and try again once the router has fully started up. (Note: This process may take up to 5 minutes)</h3>
</div>
<div id="in8" class="desc">
<h3>Failing Device</h3>
<p>A red power light most likely indicates the device is not functioning properly. Contact your ISP.</p>
</div>
<div id="tv1" class="desc">
<h1>TV Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="tv2">opt1</label></div>
<div><label><input type="radio" name="group1" value="tv3">opt2</label></div>
<div><label><input type="radio" name="group1" value="tv4">opt3</label></div>
</form>
</div>
<div id="ph1" class="desc">
<h1>Phone Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="ph2">opt1</label></div>
<div><label><input type="radio" name="group1" value="ph3">opt2</label></div>
<div><label><input type="radio" name="group1" value="ph4">opt3</label></div>
</form>
</div>
</body>
</html>
答案 1 :(得分：0)
这应该这样做： https://jsfiddle.net/csbnw5ne/2/
我希望jsFiddle中的评论清楚。 我没有多少时间，所以我不得不赶时间。这是一个相当简单的解决方案：
你必须记住你打开的盒子和你必须关闭的盒子。你必须以某种方式找到它，所以我用box-number编号框。
然后，在jQuery中，我检查包含选项的框号。我继续关闭刚刚点击的框之外的所有框，但是只有先前打开的框是＆＃34;之前的＆＃34;框比刚刚点击的框！
然后我只需打开所需的框而不隐藏所有框。
现在您要做的就是确保正确排序。确保任何＆＃34;结束＆＃34;测验的最后一个框并正确编号。像现在一样将它们组合在一起，它应该可以工作。它并不完美，但它只是在几分钟内就可以想到它，如果你保持你的html排序就应该有效。
如果您对此有任何疑问，请与我们联系！ 当jsFiddle退出时的新HTML：
<h1>Troubleshooting</h1>
<h2>What needs to be fixed?</h2>
<form>
<div><label><input type="radio" name="group1" value="in1">Internet</label></div>
<div><label><input type="radio" name="group1" value="tv1">TV</label></div>
<div><label><input type="radio" name="group1" value="ph1">Phone</label></div>
</form>
<div id="in1" class="desc" data-box="1">
<h3>Internet Troubleshooting</h3>
<h3>Are there lights on the router?</h3>
<form>
<div><label><input type="radio" name="group1" value="in2">Yes</label></div>
<div><label><input type="radio" name="group1" value="in3">No</label></div>
</form>
</div>
<div id="in2" class="desc" data-box="2">
<h3>Is the power light red?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in3" class="desc" data-box="3">
<h3>Is the router plugged in?</h3>
<form>
<div><label><input type="radio" name="group1" value="in6">Yes</label></div>
<div><label><input type="radio" name="group1" value="in7">No</label></div>
</form>
</div>
<div id="in6" class="desc" data-box="4">
<h3>Plug the router into another outlet. Is the power light on?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in4" class="desc" data-box="5">
<h3>Failing Device</h3>
<p>A red power light most likely indicates the device is not functioning properly. Contact your ISP.</p>
</div>
<div id="in7" class="desc" data-box="6">
<h3>Please plug in your router and try again once the router has fully started up. (Note: This process may take up to 5 minutes)</h3>
</div>
<div id="tv1" class="desc" data-box="7">
<h1>TV Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="tv2">opt1</label></div>
<div><label><input type="radio" name="group1" value="tv3">opt2</label></div>
<div><label><input type="radio" name="group1" value="tv4">opt3</label></div>
</form>
</div>
<div id="ph1" class="desc" data-box="8">
<h1>Phone Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="ph2">opt1</label></div>
<div><label><input type="radio" name="group1" value="ph3">opt2</label></div>
<div><label><input type="radio" name="group1" value="ph4">opt3</label></div>
</form>
</div>
jsfiddle出局时的新javascript：
$(document).ready(function(){
var lastBoxOpened = 0;
$("input[name$='group1']").click(function() {
var boxNumber = parseInt($(this).parents('.desc').attr("data-box"));
//check if the data-box was succesfully retrieved. If not, first option chosen, reset all of it
if(isNaN(boxNumber)){
boxNumber = 0;
}
var test = $(this).val();
var target = $("#"+test)
var newBoxOpened = target.attr("data-box");
//check if the last opened box was an earlier one than the newly clicked one
if(lastBoxOpened > boxNumber){
//hide boxes beyond the one we opened now
$('.desc').each(function(){
//if box number is bigger than the currently clicked box, close them.
if($(this).attr("data-box") > boxNumber){
$(this).hide();
//uncheck the previously selected radio buttons in now hidden things
$('input', this).prop("checked", false);
}
});
}
//render target box
target.show();
//update last opened box to the newly opened one
lastBoxOpened = newBoxOpened;
});
});
旁注：我将in6包装器的html放在in4包装器上方，以便这个结果（在测验结束之前永远不会显示）始终保持在底部。否则它会弹出in6而不是答案。
更新：我现在还添加了实际清除以前选中的单选按钮的功能，这些按钮被隐藏！对我来说似乎不那么草率（如果用户必须单击选中的框以查看结果，则会发出错误）
答案 2 :(得分：-1)
您必须在javascript中使用动态元素，这些元素应该只链接到html中的一个div。这是我做过调查的一个例子。不知道你是否知道，但动态元素是带有$（＆lt; ...＆gt;）的元素：
HTML：
<div id = "surveyDiv">
<ul class = "options">
<ul><input type="radio" id="v1" name="q" value=1>1</ul>
<ul><input type="radio" id="v2" name="q" value=2>2</ul>
<ul><input type="radio" id="v3" name="q" value=3>3</ul>
<ul><input type="radio" id="v4" name="q" value=4>4</ul>
<ul><input type="radio" id="v5" name="q" value=5>5</ul>
</ul>
<button id="next" type="button">Next</button>
</div>
使用Javascript：
$('#surveyTime').on('click', function(){
friend.name = $('#nameInput').val().trim();
$('.personalInfo').hide();
$('.survey').show();
});
//survey questions
var questions =
[{question: "You would know at least 2 songs at a Pearl Jam concert"},
{question: "You would dress up and dance all day Electric Zoo"},
{question: "You can tell the difference between Country Songs"},
{question: "You enjoy guitar solos"},
{question: "You have been or would go to Bonnaroo"},
{question: "You love Justin Bieber"},
{question: "You know who Public Enemy is"},
{question: "You appreciate Miles Davis"},
{question: "You like and dance/or would like to learn to dance salsa"},
{question: "You're one of those people that says you like all music"}];
//starting with question as 0 since array starts at 0
var questionNumber = 0;
//creates each question one at a time
function createQuestion(index){
var newDiv = $('<div>', {
id: 'current'
});
var newP = $('<p>');
newP.append(questions[index].question);
newDiv.append(newP);
return newDiv;
};
//appends the next question and removes the previous question
//also removes the display of the questions once done
function displayNext(){
$('#current').remove();
if(questionNumber < questions.length){
var nextQuestion = createQuestion(questionNumber);
$('#question').append(nextQuestion);
} else {
$('.survey').hide();
$('#submitButton').show();
var newDiv2 = $('<div>');
var final = $('<h2>Thank You For Taking This Survey. Please Press Submit Button To Meet Your Match</h2>');
newDiv2.append(final);
$('.thankYou').append(newDiv2);
}
}