Question

我在函数getRadioButtonValue下有5个if else条件。即使单击右键组合，该功能也无法满足所有条件。

我尝试使用Chrome Developer工具调试脚本，但问题仍然存在。代码在哪里破碎？

有关该页面的一些信息，我使用Javascript来隐藏div和标题，以便在任何时候只能看到一个问题。

只有第一个if条件有效，但没有别的

在最后一页上点击Get Result按钮后会看到结果，该页面应重定向到相应的页面。

[删除代码]

[更新代码]

我无法根据Keith下面给出的回应自动隐藏我的div。仅供参考：他的代码按预期工作。

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
.hidden {
    display: none;
}
.visible {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 445px;
    background: #EFDFBC;
}
</style>

</head>
<body>

	<div id="first-question" class="visible">
		<h3>How?</h3>
		<ul>
			<li>abc</li>
			<li>def</li>
		</ul>
		<hr>
		<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
		<label for="quiz-question-one-yes" id="oneYes">Yes</label>
		<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
		<label for="quiz-question-one-no" id="oneNo">No</label>
	</div>	

	<div id="second-question" class="hidden">
		<h3>To</h3>
		<hr>
		<input type="radio" name="quiz-question-two" id="quiz-question-two-yes" value="yes" />
		<label for="quiz-question-two-yes" id="twoYes">Yes</label>
		<input type="radio" name="quiz-question-two" id="quiz-question-two-no" value="no" />
		<label for="quiz-question-two-yes" id="twoNo">No</label>
	</div>

	<div id="third-question" class="hidden">
		<h3>Make </h3>
		<hr>
		<input type="radio" name="quiz-question-three" id="quiz-question-three-yes" value="yes" />
		<label for="quiz-question-three-yes" id="threeYes">Yes</label>
		<input type="radio" name="quiz-question-three" id="quiz-question-three-no" value="no" />
		<label for="quiz-question-three-yes" id="threeNo">No</label>
	</div>

	<div id="fourth-question" class="hidden">
		<h3>This</h3>
		<hr>
		<input type="radio" name="quiz-question-four" id="quiz-question-four-yes" value="yes" />
		<label for="quiz-question-four-yes" id="fourYes">Yes</label>
		<input type="radio" name="quiz-question-four" id="quiz-question-four-no" value="no" />
		<label for="quiz-question-four-yes" id="fourNo">No</label>  
	</div>

	<div id="fifth-question" class="hidden">
		<h3>Work?</h3>
		<hr>
		<input type="radio" name="quiz-question-five-yes" id="quiz-question-five-yes" value="yes" />
		<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
		<input type="radio" name="quiz-question-five-no" id="quiz-question-five-no" value="no" />
		<label for="quiz-question-five-yes" id="fiveNo">No</label>   
	</div>	

	<div class="page result">
	   <label>Results</label>
	   <div id="result"></div>
	</div>
</body>
</html>

<script type="text/javascript">
var results = {};

function updateResult() {
  var r = results,
      rt = $('#result');
  if (r.quiz-question-one && r.quiz-question-two && r.quiz-question-three && r.quiz-question-four && r.quiz-question-five) {
     rt.text('All Yes');
  } else if (!r.quiz-question-one && !r.quiz-question-two && !r.quiz-question-three && !r.quiz-question-four && !r.quiz-question-five) {
     rt.text('All No');
  } else {
     rt.text('We have a mixed response');
  }
}

$(function () {
  $('body').on('click', '[name]', function () {
     var $this = $(this),
         page = $this.closest('.hidden'),
         next_page = $(page.next());
     results[$this.attr('name')] = $(this).val() === 'yes';
     page.removeClass('visible');
     next_page.addClass('visible');
     if (next_page.hasClass('result')) updateResult();
  });
});
</script>

Answer 1

我在下面创建了一个示例，我认为你可以使用它。广播中的值我认为在您提交之前不会更新，而是我已经在onclick中捕获了结果。你现在可以添加你的CSS造型等希望有所帮助。

var results = {};

function updateResult() {
  var r = results,
      rt = $('#result');
  if (r.q1 && r.q2 && r.q3) {
     rt.text('All Yes');
  } else if (!r.q1 && !r.q2 && !r.q3) {
     rt.text('All No');
  } else {
     rt.text('We have a mixed response');
  }
}

$(function () {
  $('body').on('click', '[name]', function () {
     var $this = $(this),
         page = $this.closest('.page'),
         next_page = $(page.next());
     results[$this.attr('name')] = $(this).val() === 'yes';
     page.removeClass('active');
     next_page.addClass('active');
     if (next_page.hasClass('result')) updateResult();
  });
});

.page {
  display: none;
}

.page.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="page active">
  <div>Question 1</div>
  <label for="q1yes">Yes</label>
  <input id="q1yes" type="radio" name="q1" value="yes">
  <label for="q1no">No</label>
  <input id="q1no" type="radio" name="q1" value="no">
</div>

<div class="page">
  <div>Question 2</div>
  <label for="q2yes">Yes</label>
  <input id="q2yes" type="radio" name="q2" value="yes">
  <label for="q2no">No</label>
  <input id="q2no" type="radio" name="q2" value="no">  
</div>

<div class="page">
  <div>Question 3</div>
  <label for="q3yes">Yes</label>
  <input id="q3yes" type="radio" name="q3" value="yes">
  <label for="q3no">No</label>
  <input id="q3no" type="radio" name="q3" value="no">  
</div>

<div class="page result">
   <label>Results</label>
   <div id="result"></div>
</div>

<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>

在上面你使用的是type =“radio”，这意味着所有具有相同名称的type =“radio”将组合在一起，而不仅仅是这两个。要组合在一起，只需在输入中为它们命名。例如

<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>

上面你可以看到我给了2个输入名称=“quiz-question-one”，然后对于下一个问题可能会给他们一个名字=“quiz-question-two”等等。

另一方面，有许多地方可以简化您的代码，但希望这可以解决您当前的问题。

Javascript条件不能正确按钮组合

1 个答案: