Javascript条件不能正确按钮组合 [英] Javascript conditionals not working on correct button combination
问题描述
在函数 getRadioButtonValue 下有5个if else条件。即使单击右键组合，该功能也无法满足所有条件。
我尝试使用Chrome Developer工具调试脚本，但问题仍然存在。代码中断在哪里？
关于页面的一些信息，我使用Javascript来隐藏div和标题，以便在任何时候只有一个问题。
只有第一个if条件有效，但没有别的
结果见于 [更新代码] 基于Keith在下面给出的回应，我无法自动隐藏我的div。
$ b <删除的代码>
FYI：他的代码按预期工作。
<！ 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;保证金：0汽车;宽度：650px;身高：445px;背景：#EFDFBC;}< / style>< / head>< body> < div id =first-questionclass =visible> < H3>如何< / H3> < UL> <李> ABC< /锂> <李> DEF< /锂> < / UL> < HR> < input type =radioname =quiz-question-oneid =quiz-question-one-yesvalue =yes/> < label for =quiz-question-one-yesid =oneYes>是< / label> < input type =radioname =quiz-question-oneid =quiz-question-one-novalue =no/> < label for =quiz-question-one-noid =oneNo>否< / label> < / DIV> < div id =second-questionclass =hidden> < H3>到< / H3> < HR> < input type =radioname =quiz-question-twoid =quiz-question-two-yesvalue =yes/> < label for =quiz-question-two-yesid =twoYes>是< / label> < input type =radioname =quiz-question-twoid =quiz-question-two-novalue =no/> < label for =quiz-question-two-yesid =twoNo> No< / label> < / DIV> < div id =third-questionclass =hidden> < h3> Make< / h3> < HR> < input type =radioname =quiz-question-threeid =quiz-question-three-yesvalue =yes/> < label for =quiz-question-three-yesid =threeYes>是< / label> < input type =radioname =quiz-question-threeid =quiz-question-three-novalue =no/> < label for =quiz-question-three-yesid =threeNo>否< / label> < / DIV> < div id =fourth-questionclass =hidden> < H3>这< / H3> < HR> < input type =radioname =quiz-question-fourid =quiz-question-four-yesvalue =yes/> < label for =quiz-question-four-yesid =fourYes>是< / label> < input type =radioname =quiz-question-fourid =quiz-question-four-novalue =no/> < label for =quiz-question-four-yesid =fourNo> No< / label> < / DIV> < div id =fifth-questionclass =hidden> < H3>工作< / H3> < HR> < input type =radioname =quiz-question-five-yesid =quiz-question-five-yesvalue =yes/> < label for =quiz-question-five-yesid =fiveYes>是< / label> < input type =radioname =quiz-question-five-noid =quiz-question-five-novalue =no/> < label for =quiz-question-five-yesid =fiveNo> No< / label> < / DIV> < div class =page result> <标签>结果< /标签> < div id =result>< / div> < / div>< / body>< / html>< script type =text / javascript> var results = {}; function updateResult（）{var r = results，rt = $ ）; if（r.quiz-question-one&& r.quiz-question-two& r.quiz-question-three&& r.quiz-question-four&& r.quiz-问题五）{rt.text（'All Yes'）; }否则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（'我们有一个混合的回应'）; （'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>
广播中的值我认为在您提交之前不会更新，而是我已经在onclick中捕获了结果。您现在可以添加CSS样式等。希望有帮助。
var results = {}; function updateResult（）{var r = results，rt = $（'＃result'）;如果（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（'我们有一个混合的回应'）; （'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>问题1< / div> < label for =q1yes>是< / label> < input id =q1yestype =radioname =q1value =yes> < label for =q1no>否< / label> < input id =q1notype =radioname =q1value =no>< / div>< div class =page> < div>问题2< / div> < label for =q2yes>是< / label> < input id =q2yestype =radioname =q2value =yes> < label for =q2no>否< / label> < input id =q2notype =radioname =q2value =no> < / div>< div class =page> < div>问题3< / div> < label for =q3yes>是< / label> < input id =q3yestype =radioname =q3value =yes> < label for =q3no>否< / label> < input id =q3notype =radioname =q3value =no> < / div>< div class =page result> <标签>结果< /标签> < div id =result>< / div>< / div>
< input type =radioid =quiz-question-one-yesvalue =yes/>
< label for =quiz-question-one-yesid =oneYes>是< / label>
< input type =radioid =quiz-question-one-novalue =no/>
< label for =quiz-question-one-noid =oneNo> No< / label>
在上面你使用的是type =radio，这意味着所有的type =radio相同的名字将组合在一起，而不仅仅是这两个。分组在一起给他们输入一个名字。例如
< input type =radioname =quiz-question-oneid =quiz-question- one-yesvalue =yes/>
< label for =quiz-question-one-yesid =oneYes>是< / label>
< input type =radioname =quiz-question-oneid =quiz-question-one-novalue =no/>
< label for =quiz-question-one-noid =oneNo>否< / label>
上面你可以看到我给了2个输入名称=quiz-question-one ，然后对于下一个问题可能会给他们一个名字=测验问题二等。
另一方面，你的代码有很多地方可以简化，但希望这将解决您目前的问题。
I have 5 if else conditions under function getRadioButtonValue. The function does not go through all the conditions even after clicking the right button combinations.
I have tried to debug the script using Chrome Developer tools but the problem still exists. Where is the code breaking?
Some information regarding the page, I am using Javascript to hide the div's and headers so that at any one time there is only one question seen.
Only the first if conditions work, but nothing else
The results are seen after Get Result button is clicked on the last page which should redirect to the appropriate page.
[DELETED CODE]
[UPDATED CODE]
I am unable to auto hide my div's based on the response given below by Keith. FYI: His code works as expected.
<!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>
I've created an example below that I think you can work from. The values from the radio I don't think get updated until you submit, instead I've captured the results in the onclick. You can now add back you CSS styling etc. Hope that helps.
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>
In the above you are using type="radio", that means all type="radio" with the same name will group together, and not just these two. To group together just give them a name on the input. eg.
<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>
Above you can see I've given the 2 inputs the name="quiz-question-one", and then for the next question maybe give them a name="quiz-question-two" etc..
On another note, there are lots of places where your code could be simplified, but hopefully this will solve your current problem.
这篇关于Javascript条件不能正确按钮组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
