分支逻辑测验-我要去哪里错?[JavaScript] [英] Branching logic quiz -- where am I going wrong? [JavaScript]
本文介绍了分支逻辑测验-我要去哪里错?[JavaScript]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试为简单的" jQuery测验开发逻辑 [在这里找小提琴] .问题是，问题路径有些动态，并产生树状结构.
I am trying to develop logic for a "simple" jQuery quiz [Fiddle here]. The problem is, the question path is somewhat dynamic, and produces a tree structure.
例如，第一个问题是关于宠物的:狗，猫还是鸟?如果选择狗，则会询问是哪种犬.如果选择猫，则会询问是哪种猫.等等，然后再深入研究(该特定品种的彩色狗是什么?")
For example, the first question is about pets: dog, cat, or bird? If you choose dog, it asks what breed dog. If you choose cats, it asks what breed cat. Etc. Then it delves deeper ("What color dog of this particular breed?")
我遇到的问题是第三组问题.我对任何一只狗的颜色都不满意.实际上，点击处理程序甚至不会触发.谁能告诉我我在哪里犯规了?
The problem I am having is getting to that third set of questions. I can't get the color question to work for any of the dogs. In fact, the click handler doesn't even fire. Can anyone tell me where I've fouled this up?
谢谢.
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);
}
}
推荐答案
使用 $(document).on('click'，'.choice'，function(){}); 即使删除并重新添加 .choice 元素也可以正常工作.并更改 currentQuestion 使其每次回答时都递增，以便我们可以跟踪回答的问题数.
Use $(document).on('click', '.choice', function() {}); which will work even when you remove and re-add the .choice element. And change the currentQuestion to get incremented each time he/she answers so that we can track the number of questions answered.
更新:-
您的逻辑似乎并不完美.因此，像下面的演示一样稍微更改对象结构
Your logic doesn't seem to be working perfect. So change the object structure slightly like the following demo
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>这篇关于分支逻辑测验-我要去哪里错?[JavaScript]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
