JS, дерево ответов и вопросов [дубликат]

153
01 февраля 2018, 19:50

На данный вопрос уже ответили:

  • Почему асинхронная функция внутри цикла выполняет последнюю итерацию много раз? 2 ответа

Здравствуйте.

Ранее я ставила этот вопрос

Один вопрос, три ответа, каждый ответ ведет за собой другие вопросы и т д. У меня проблема с замыканием.

var data = [{ 
    id: 1, 
    question: "Скільки простору маєте?", 
    options: [{ 
        userPick: "Чимало", 
        moveTo: 2 
      }, 
      { 
        userPick: "Трохи маю", 
        moveTo: 3 
      }, 
      { 
        userPick: "можу виділити лише куток у квартирі", 
        moveTo: 4 
      } 
    ] 
  }, 
 
  { 
    id: 2, 
    question: "Яку користь хочете мати?", 
    options: [{ 
        userPick: "Пересування", 
        moveTo: 5 
      }, 
      { 
        userPick: "Яйця", 
        moveTo: 6 
      }, 
      { 
        userPick: "Молоко", 
        moveTo: 7 
      } 
    ] 
  }, 
 
  { 
    id: 3, 
    question: "Шерсть потрібна?", 
    options: [{ 
        userPick: "Так", 
        moveTo: 16 
      }, 
      { 
        userPick: "Ні", 
        moveTo: 8 
      } 
    ] 
  }, 
 
  { 
    id: 4, 
    question: "Має бути з вухами?", 
    options: [{ 
        userPick: "Так", 
        moveTo: 10 
      }, 
      { 
        userPick: "Ніяких вух", 
        moveTo: 9 
      } 
    ] 
  }, 
 
  { 
    id: 5, 
    result: "коня" 
  }, 
 
  { 
    id: 6, 
    question: "Має хоть трохи літати?", 
    options: [{ 
        userPick: "Так", 
        moveTo: 12 
      }, 
      { 
        userPick: "Ніяких літати", 
        moveTo: 8 
      } 
    ] 
  }, 
 
  { 
    id: 7, 
    question: "Хочете мати можливість задіяти в ролику про шоколаду Milka?", 
    options: [{ 
        userPick: "Ні", 
        moveTo: 14 
      }, 
      { 
        userPick: "Було б непогано", 
        moveTo: 13 
      } 
    ] 
  }, 
  { 
    id: 8, 
    question: "Нічого що трошки агресивний?", 
    options: [{ 
        userPick: "Підійде", 
        moveTo: 18 
      }, 
      { 
        userPick: "Не підійде", 
        moveTo: 17 
      } 
    ] 
  }, 
  { 
    id: 9, 
    question: "Як щодо птиці?", 
    options: [{ 
        userPick: "Так", 
        moveTo: 6 
      }, 
      { 
        userPick: "Не впевнений", 
        moveTo: 11 
      } 
    ] 
  }, 
 
]; 
 
function answer(answer_id) { 
 
  var result = data.find(function(value) { 
    return value.id == answer_id; 
  }); 
 
 
  $("#answer").empty(); 
 
  document.getElementById("question").innerHTML = result.question; 
 
  for (var q = 0; q < result.options.length; q++) { 
 
    var button = document.createElement("button"); 
 
    button.innerHTML = result.options[q].userPick; 
 
    button.onclick = function() { 
      answer(result.options[q].moveTo); 
    }; 
 
    document.getElementById("answer").appendChild(button); 
 
  } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h3 id="question">Скільки простору маєте?</h3> 
 
<div id="answer"> 
  <button class="option" onclick="answer(2)">Чимало</button> 
  <button class="option" onclick="answer(3)">Трохи маю</button> 
  <button class="option" onclick="answer(4)">можу виділити лише куток в квартирі</button> 
</div>

Вопрос заключается в button.onclick. Кажется, там нужно использовать замыкание, но не знаю как

Answer 1

var data = [{ 
    id: 1, 
    question: "Скільки простору маєте?", 
    options: [{ 
        userPick: "Чимало", 
        moveTo: 2 
      }, 
      { 
        userPick: "Трохи маю", 
        moveTo: 3 
      }, 
      { 
        userPick: "можу виділити лише куток у квартирі", 
        moveTo: 4 
      } 
    ] 
  }, 
 
  { 
    id: 2, 
    question: "Яку користь хочете мати?", 
    options: [{ 
        userPick: "Пересування", 
        moveTo: 5 
      }, 
      { 
        userPick: "Яйця", 
        moveTo: 6 
      }, 
      { 
        userPick: "Молоко", 
        moveTo: 7 
      } 
    ] 
  }, 
 
  { 
    id: 3, 
    question: "Шерсть потрібна?", 
    options: [{ 
        userPick: "Так", 
        moveTo: 16 
      }, 
      { 
        userPick: "Ні", 
        moveTo: 8 
      } 
    ] 
  }, 
 
  { 
    id: 4, 
    question: "Має бути з вухами?", 
    options: [{ 
        userPick: "Так", 
        moveTo: 10 
      }, 
      { 
        userPick: "Ніяких вух", 
        moveTo: 9 
      } 
    ] 
  }, 
 
  { 
    id: 5, 
    result: "коня" 
  }, 
 
  { 
    id: 6, 
    question: "Має хоть трохи літати?", 
    options: [{ 
        userPick: "Так", 
        moveTo: 12 
      }, 
      { 
        userPick: "Ніяких літати", 
        moveTo: 8 
      } 
    ] 
  }, 
 
  { 
    id: 7, 
    question: "Хочете мати можливість задіяти в ролику про шоколаду Milka?", 
    options: [{ 
        userPick: "Ні", 
        moveTo: 14 
      }, 
      { 
        userPick: "Було б непогано", 
        moveTo: 13 
      } 
    ] 
  }, 
  { 
    id: 8, 
    question: "Нічого що трошки агресивний?", 
    options: [{ 
        userPick: "Підійде", 
        moveTo: 18 
      }, 
      { 
        userPick: "Не підійде", 
        moveTo: 17 
      } 
    ] 
  }, 
  { 
    id: 9, 
    question: "Як щодо птиці?", 
    options: [{ 
        userPick: "Так", 
        moveTo: 6 
      }, 
      { 
        userPick: "Не впевнений", 
        moveTo: 11 
      } 
    ] 
  }, 
 
]; 
 
function answer(answer_id) { 
 
  var result = data.find(function(value) { 
    return value.id == answer_id; 
  }); 
 
console.log(answer_id,result); 
 
  $("#answer").empty(); 
 
  if (result && result.question) { 
    document.getElementById("question").innerHTML = result.question; 
 
    for (let q = 0; q < result.options.length; q++) { 
      var button = document.createElement("button"); 
      button.innerHTML = result.options[q].userPick; 
      button.onclick = function() { 
        answer(result.options[q].moveTo); 
      }; 
      document.getElementById("answer").appendChild(button); 
    }  
  } else { 
    document.getElementById("question").innerHTML = JSON.stringify(result); 
  } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h3 id="question">Скільки простору маєте?</h3> 
 
<div id="answer"> 
  <button class="option" onclick="answer(2)">Чимало</button> 
  <button class="option" onclick="answer(3)">Трохи маю</button> 
  <button class="option" onclick="answer(4)">можу виділити лише куток в квартирі</button> 
</div>

READ ALSO
Значения из слайдера

Значения из слайдера

Помогите пожалуйста, как взять значения и с помощью их скрывать или отображать divы

229
Как выводить через console.log в последнюю строку?

Как выводить через console.log в последнюю строку?

Как продолжать выводить в консоль, при вызове consolelog(), не с новой строки каждый раз, а продолжить вывод текста в текущую строку?

239
Yii2 ajax перезагрузка данных

Yii2 ajax перезагрузка данных

На странице выводится таблица сотрудников при помощи виджета yii\grid\GridViewВ заголовочной строке при помощи виджета kartik\select2\Select2 выводится два...

225