3

Задача написать тест. Вопросы на три варианта ответа и в зависимости от выбранных ответов, соответственно три вывода.

Счетчик ответов работает некорректно.. Первый вопрос дает правильное значение, а последующие по разному.

В чем моя ошибка?

Пробовал с текущей страницы таким образом результат брать, не помогло.

var pageN = $ ('.page' + n);
switch ($( 'pageN input[name]:checked' ).val())

var n = 1;
var b = 0,
  m = 0,
  d = 0;

$('#start-test').click(function() {
  $('.page').css("display", "none");
  $('.page1').css("display", "block");
});

$('.arrow-right').click(function() {
  $('.page' + n).css("display", "none");
  onChecked();
  n++;
  $('.page' + n).css("display", "block");

  switch ($("input[name]:checked").val()) {
    case 'B':
      alert('Бизнес');
      b++;
      break;
    case 'D':
      alert('Дизайн');
      d++;
      break;
    case 'M':
      alert('Медиа');
      m++;
      break;
  }

  function onChecked() {
    console.log($("input:radio:checked").val());
  }

  console.log(b, m, d);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="page1">
  <p class="orange-text">Вопрос 1</p>
  <label>
    <input type="radio" value="D" name="answer1">Ответ Д</label>
  <label>
    <input type="radio" value="B" name="answer1">Ответ Б</label>
  <label>
    <input type="radio" value="M" name="answer1">Ответ М</label>
  <img class="arrow-left-off" src="img/arr/back.png" alt="Назад">
  <img class="arrow-right" src="img/arr/next.png" alt="Вперед">
</div>

<div class="page2">
  <p class="orange-text">Вопрос 2</p>
  <label>
    <input type="radio" value="B" name="answer2">Ответ Б</label>
  <label>
    <input type="radio" value="M" name="answer2">Ответ М</label>
  <label>
    <input type="radio" value="D" name="answer2">Ответ Д</label>
  <img class="arrow-left" src="img/arr/back.png" alt="Назад">
  <img class="arrow-right" src="img/arr/next.png" alt="Вперед">
</div>

<div class="page3">
  <p class="orange-text">Вопрос 3</p>
  <label>
    <input type="radio" value="B" name="answer3">Ответ Б</label>
  <label>
    <input type="radio" value="M" name="answer3">Ответ М</label>
  <label>
    <input type="radio" value="D" name="answer3">Ответ Д</label>
  <img class="arrow-left" src="img/arr/back.png" alt="Назад">
  <img class="arrow-right" src="img/arr/next.png" alt="Вперед">
</div>

</html>

4
  • 1
    Вы могли бы добавить свой html и обернуть все в секцию Фрагмент кода. Тогда Ваш вопрос выглядел бы нагляднее и ответ на него дадут быстрее. 13 мая 2016 в 9:06
  • Я бы сказал так, вы кликаете на разные блоки, а данные берете всегда из первой формы. 13 мая 2016 в 11:39
  • Не пойму принцип. Он первые три значения записывает ответ на первый вопрос, а следующие значения уже берет другие ссылка 13 мая 2016 в 11:53
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 13 мая 2016 в 16:27

1 ответ 1

0

Как отметил @ВасилийБарбашев, хотя Вы и прячете/показываете разные фрагменты html, значение $("input[name]:checked").val() всегда берется из первого "input[name]:checked" на странице.

Ограничьте выборку инпутов родителем кнопки:

switch ($(this).parent().find("input[name]:checked").val()) {

Или Ваш вариант (исправлен):

var pageN = '.page' + n;
switch ($(pageN + ' input[name]:checked').val()) {

но тут надо аккуратно поддерживать текущее значение n.

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.