分支逻辑测验--我哪里出错了？[JavaScript]
分支逻辑测验--我哪里出错了？[JavaScript]
提问于 2017-10-12 04:50:24
我正试图为一个“简单”的jQuery测试[这里的小提琴]开发逻辑。问题是，问题路径在某种程度上是动态的，并产生一个树结构。
例如，第一个问题是关于宠物:狗，猫，还是鸟？如果你选择狗，它会问你什么品种的狗。如果你选择猫，它会问什么品种的猫。等。然后再深入挖掘(“这种特殊品种的什么颜色的狗？”)
我现在面临的问题是回答第三组问题。我不能让颜色问题适用于任何一只狗。事实上，单击处理程序甚至不会触发。有人能告诉我我在哪里搞砸的吗？
提前谢谢你。
var questions = [{
"text": "What's your favorite pet?",
"choices": [
{
"label": "Dog",
"path": 1
},
{
"label": "Cat",
"path": 2
},
{
"label": "Bird",
"path": 3
},
]
}, {
"text": "What breed of dog?", //1 a
"choices": [
{
"label": "Golden Retriever",
"path": 4
},
{
"label": "Labrador",
"path": 5
},
{
"label": "Poodle",
"path": 6
},
]
}, {
"text": "What breed of cat?", //1 b
"choices": [
{
"label": "Siamese",
"path": 4
},
{
"label": "Persian",
"path": 4
},
{
"label": "Tortie",
"path": 4
},
]
}, {
"text": "What breed of bird?", //1 c
"choices": [
{
"label": "Bluebird",
"path": 4
},
{
"label": "Robin",
"path": 4
},
{
"label": "Parrot",
"path": 4
},
]
}, {
"text": "What color Golden Retriever?", //1 a i
"choices": [
{
"label": "Golden",
"path": 4
},
{
"label": "Sandy",
"path": 4
},
{
"label": "Blonde",
"path": 4
},
]
}, {
"text": "What color Labrador?", //1 b i
"choices": [
{
"label": "Black",
"path": 4
},
{
"label": "Chocolate",
"path": 4
},
{
"label": "Tan",
"path": 4
},
]
}, {
"text": "What color Poodle?", //1 c i
"choices": [
{
"label": "Ugly",
"path": 4
},
{
"label": "Uglier",
"path": 4
},
{
"label": "Ugliest",
"path": 4
},
]
}];
var currentQuestion = 0,
quizComplete = false;
$(document).ready(function() {
updateQuestion();
if (!quizComplete) {
$('.choice').on('click', function() {
value = $(this).attr('value');
currentQuestion = value;
if (currentQuestion < questions.length) {
updateQuestion();
} else {
quizComplete = true;
}
});
}
});
function updateQuestion() {
var question = questions[currentQuestion].text;
var questionText = $(document).find(".container > .question");
var choiceList = $(document).find(".container > .choices");
var numChoices = questions[currentQuestion].choices.length;
// Set question text
$(questionText).text(question);
// Clear current choices and update with new ones
$(".choice").remove();
var choice, path;
for (i = 0; i < numChoices; i++) {
choice = questions[currentQuestion].choices[i].label;
path = questions[currentQuestion].choices[i].path;
$('<div class="choice" value=' + path + '>' + choice + '</div>').appendTo(choiceList);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-10-12 05:53:34
使用$(document).on('click', '.choice', function() {});，即使在删除和重新添加.choice元素时也能工作。并将currentQuestion更改为每次他/她回答时递增，这样我们就可以跟踪回答的问题的数量。
更新：-
你的逻辑似乎不太完美。因此，稍微修改对象结构，如下所示
var questions = {
"text": "What's your favorite pet?",
"choices": [{
"label": "Dog",
"path": 1,
"question": {
"text": "What breed of dog?", //1 a
"choices": [{
"label": "Golden Retriever",
"path": 11,
"question": {
"text": "What color Golden Retriever?", //1 a
"choices": [{
"label": "Golden",
"path": 111
},
{
"label": "Sandy",
"path": 112
},
{
"label": "Blonde",
"path": 113
},
]
}
},
{
"label": "Labrador",
"path": 12,
"question": {
"text": "What color Labrador?", //1 a
"choices": [{
"label": "Black",
"path": 121
},
{
"label": "Chocolate",
"path": 122
},
{
"label": "Tan",
"path": 123
},
]
}
},
{
"label": "Poodle",
"path": 13,
"question": {
"text": "What color Poodle?", //1 a
"choices": [{
"label": "Ugly",
"path": 131
},
{
"label": "Uglier",
"path": 132
},
{
"label": "Ugliest",
"path": 133
},
]
}
},
]
}
},
{
"label": "Cat",
"path": 2,
"question": {
"text": "What breed of cat?", //1 b
"choices": [{
"label": "Siamese",
"path": 21,
"question": {
"text": "What color Siamese?", //1 a
"choices": [{
"label": "white",
"path": 211
},
{
"label": "orange",
"path": 212
},
{
"label": "red",
"path": 213
},
]
}
},
{
"label": "Persian",
"path": 22,
"question": {
"text": "What color Persian?", //1 a
"choices": [{
"label": "lavendar",
"path": 221
},
{
"label": "green",
"path": 222
},
{
"label": "black",
"path": 223
},
]
}
},
{
"label": "Tortie",
"path": 23,
"question": {
"text": "What color Tortie?", //1 c
"choices": [{
"label": "violet",
"path": 231
},
{
"label": "orange",
"path": 232
},
{
"label": "Pink",
"path": 233
},
]
}
},
]
}
},
{
"label": "Bird",
"path": 3,
"question": {
"text": "What breed of bird?", //1 a
"choices": [{
"label": "Bluebird",
"path": 31,
"question": {
"text": "What breed of Bluebird?", //1 a
"choices": [{
"label": "Blue",
"path": 311
},
{
"label": "grey",
"path": 312
},
{
"label": "yellow",
"path": 313
},
]
}
},
{
"label": "Robin",
"path": 32,
"question": {
"text": "What breed of Robin?", //1 a
"choices": [{
"label": "Black",
"path": 321
},
{
"label": "White",
"path": 322
},
{
"label": "Red",
"path": 323
},
]
}
},
{
"label": "Parrot",
"path": 33,
"question": {
"text": "What breed of Parrot?", //1 a
"choices": [{
"label": "Multi Color",
"path": 331
},
{
"label": "Red",
"path": 332
},
{
"label": "Green",
"path": 333
},
]
}
},
]
}
},
]
};
var quizComplete = false,
answers = [],
currentObj = questions;
$(document).ready(function() {
updateQuestion();
if (!quizComplete) {
$('.choices').on('click', '.choice', function() {
value = $(this).attr('value');
answers.push($(this).html());
//currentQuestion++;
if (currentObj.choices[value].question) {
currentObj = currentObj.choices[value].question;
} else {
quizComplete = true;
alert("quizComplete answers : " + answers);
answers = [];
currentObj = questions;
}
updateQuestion();
});
}
});
function updateQuestion() {
var question = currentObj.text;
var questionText = $(document).find(".container > .question");
var choiceList = $(document).find(".container > .choices");
var numChoices = currentObj.choices.length;
// Set question text
$(questionText).text(question);
// Clear current choices and update with new ones
$(".choice").remove();
var choice, path;
for (i = 0; i < numChoices; i++) {
choice = currentObj.choices[i].label;
path = currentObj.choices[i].path;
$('<div class="choice" value=' + i + '>' + choice + '</div>').appendTo(choiceList);
}
}body {
font-family: serif;
}
h1 {
text-align: center;
}
.container {
background-color: peachpuff;
border-radius: 6px;
width: 75%;
margin: auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888;
position: relative;
}
.question {
font-size: 2em;
width: 90%;
height: auto;
margin: auto;
border-radius: 6px;
background-color: goldenrod;
text-align: center;
}
.choices {
font-family: Courier, serif;
color: indianred;
margin-top: 2em;
}
.choice {
cursor: pointer;
font-size: 2em;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="question"></div>
<div class="choices"></div>
</div>
</body>
Stack Overflow用户
发布于 2017-10-12 05:23:57
每次更新问题时都必须添加单击事件。这里更新了代码
var questions = [{
"text": "What's your favorite pet?",
"choices": [
{
"label": "Dog",
"path": 1
},
{
"label": "Cat",
"path": 2
},
{
"label": "Bird",
"path": 3
},
]
}, {
"text": "What breed of dog?", //1 a
"choices": [
{
"label": "Golden Retriever",
"path": 4
},
{
"label": "Labrador",
"path": 5
},
{
"label": "Poodle",
"path": 6
},
]
}, {
"text": "What breed of cat?", //1 b
"choices": [
{
"label": "Siamese",
"path": 4
},
{
"label": "Persian",
"path": 4
},
{
"label": "Tortie",
"path": 4
},
]
}, {
"text": "What breed of bird?", //1 c
"choices": [
{
"label": "Bluebird",
"path": 4
},
{
"label": "Robin",
"path": 4
},
{
"label": "Parrot",
"path": 4
},
]
}, {
"text": "What color Golden Retriever?", //1 a i
"choices": [
{
"label": "Golden",
"path": 4
},
{
"label": "Sandy",
"path": 4
},
{
"label": "Blonde",
"path": 4
},
]
}, {
"text": "What color Labrador?", //1 b i
"choices": [
{
"label": "Black",
"path": 4
},
{
"label": "Chocolate",
"path": 4
},
{
"label": "Tan",
"path": 4
},
]
}, {
"text": "What color Poodle?", //1 c i
"choices": [
{
"label": "Ugly",
"path": 4
},
{
"label": "Uglier",
"path": 4
},
{
"label": "Ugliest",
"path": 4
},
]
}];
var currentQuestion = 0,
quizComplete = false;
$(document).ready(function () {
updateQuestion();
});
//separating next Question
function nextQuestion() {
if (!quizComplete) {
$('.choice').on('click', function() {
value = $(this).attr('value');
currentQuestion = value;
if (currentQuestion < questions.length) {
updateQuestion();
} else {
quizComplete = true;
}
});
}
}
function updateQuestion() {
var question = questions[currentQuestion].text;
var questionText = $(document).find(".container > .question");
var choiceList = $(document).find(".container > .choices");
var numChoices = questions[currentQuestion].choices.length;
// Set question text
$(questionText).text(question);
// Clear current choices and update with new ones
$(".choice").remove();
var choice, path;
for (i = 0; i < numChoices; i++) {
choice = questions[currentQuestion].choices[i].label;
path = questions[currentQuestion].choices[i].path;
$('<div class="choice" value=' + path + '>' + choice + '</div>').appendTo(choiceList);
}
//It needs to be called every update
nextQuestion();
}body {
font-family: serif;
}
h1 {
text-align: center;
}
.container {
background-color: peachpuff;
border-radius: 6px;
width: 75%;
margin: auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888;
position: relative;
}
.question {
font-size: 2em;
width: 90%;
height: auto;
margin: auto;
border-radius: 6px;
background-color: goldenrod;
text-align: center;
}
.choices {
font-family: Courier, serif;
color: indianred;
margin-top: 2em;
}
.choice {
cursor: pointer;
font-size: 2em;
text-align: center;
} <body>
<div class="container">
<div class="question"></div>
<div class="choices"></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46701628
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号