分支逻辑测验 - 我哪里错了？ [JavaScript的]

Question

我正在尝试为简单的＆＃34;开发逻辑。 jQuery测验 [Fiddle here]。问题是，问题路径有点动态，并产生树形结构。

例如，第一个问题是关于宠物：狗，猫还是鸟？如果你选择狗，它会问什么品种的狗。如果你选择猫，它会问什么品种的猫。等等。然后它深入研究（＆＃34;这个特殊品种的颜色是什么狗？＆＃34;）

我遇到的问题是进入第三组问题。我不能让颜色问题适合任何一只狗。事实上，点击处理程序甚至不会触发。谁能告诉我我在哪里犯了这个罪？

提前谢谢。

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);
    }
}

Answer 1

即使您删除并重新添加$(document).on('click', '.choice', function() {});元素，也可以使用.choice。并且每次他/她回答时更改currentQuestion以增加，以便我们可以跟踪回答的问题数量。

<强>更新： -

你的逻辑似乎并不完美。因此，稍微更改对象结构，如下面的演示

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

每次更新问题时都必须添加事件。这里更新了代码

＆＃13;

＆＃13;

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();
}

＆＃13;

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;
}

＆＃13;

	<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>

＆＃13;

＆＃13;

＆＃13;