我刚开始重新编码。这只是概念证明。此代码有效!
但我想添加额外的值，但不知道该怎么做。因此，如果您按下一个答案，您可以获得多个值。所以对于第一个问题，我不仅想成为一只猫。而且还是一条鱼。但我该怎么做呢？
HTML
<head>
<link rel="stylesheet" href="index.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
你是什么动物？参加测验!
<form id="personalityQuiz">
<h3> What is your favorite food?</h3>
<input type="radio" name="food" value="cat"> I only eat meat.<br>
<input type="radio" name="food" value="horse"> I'm a strict vegetarian.<br>
<input type="radio" name="food" value="dog"> I love all food!<br>
<h3> What is your favorite hobby?</h3>
<input type="radio" name="hobby" value="horse"> I was born to run.<br>
<input type="radio" name="hobby" value="dog"> Anything with a ball.<br>
<input type="radio" name="hobby" value="cat"> Naps<br>
<h3> What scares you?</h3>
<input type="radio" name="fear" value="dog"> Vacuum cleaners.<br>
<input type="radio" name="fear" value="cat"> Water<br>
<input type="radio" name="fear" value="horse"> Anything that moves!<br>
<input type="submit" value="Submit">
</form>
<div class="result" id="cat">
<h2> You are a cat! </h2>
</div>
<div class="result" id="dog">
<h2> You are a dog! </h2>
</div>
<div class="result" id="horse">
<h2> You are a horse! </h2>
</div>
<div class="result" id="fish">
<h2> You are a fish! </h2>
</div>
<script type='text/javascript' src='file:///Users/Desktop/index.js'></script>
JS
$("#personalityQuiz").submit(function(event) {
event.preventDefault();
var answers = $(this).serializeArray();
var scores = {
cat: 0,
dog: 0,
fish: 0,
horse: 0
};
for(var answer of answers) {
scores[answer.value] += 1;
}
var maxAnimal = "cat";
for(var animal in scores){
if(scores[animal] > scores[maxAnimal]){
maxAnimal=animal;
}
}
$("#personalityQuiz").css ('display','none');
$(".result#"+maxAnimal).css ('display','block');
});
最佳答案
这是我的想法-
您需要像这样定义您的问题和答案查找
var qalookup= { "cat" : ['cat','fish'],"dog" : ["dog"], "horse": ["horse"] };
基于上面的对象，如果 cat 是答案，则显示基于键的所有元素。
不完美，但应该给你想法
$("#personalityQuiz").submit(function(event) {
var qalookup = { "cat" : ['cat','fish'],"dog" : ["dog"], "horse": ["hores"] };
event.preventDefault();
var answers = $(this).serializeArray();
var scores = {
cat: 0,
dog: 0,
fish: 0,
horse: 0
};
$(".result").hide();
for(var answer of answers) {
var ans = qalookup[answer.value];
ans.forEach(function(val) {
$("#"+val).show();
scores[val] += 1;
});
}
var maxAnimal = "cat";
for(var animal in scores){
if(scores[animal] > scores[maxAnimal]){
maxAnimal=animal;
}
}
$("#personalityQuiz").css ('display','none');
$(".result#"+maxAnimal).css ('display','block');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="personalityQuiz">
<h3> What is your favorite food?</h3>
<input type="radio" name="food" value="cat"> I only eat meat.<br>
<input type="radio" name="food" value="horse"> I'm a strict vegetarian.<br>
<input type="radio" name="food" value="dog"> I love all food!<br>
<h3> What is your favorite hobby?</h3>
<input type="radio" name="hobby" value="horse"> I was born to run.<br>
<input type="radio" name="hobby" value="dog"> Anything with a ball.<br>
<input type="radio" name="hobby" value="cat"> Naps<br>
<h3> What scares you?</h3>
<input type="radio" name="fear" value="dog"> Vacuum cleaners.<br>
<input type="radio" name="fear" value="cat"> Water<br>
<input type="radio" name="fear" value="horse"> Anything that moves!<br>
<input type="submit" value="Submit">
</form>
<div class="result" id="cat">
<h2> You are a cat! </h2>
</div>
<div class="result" id="dog">
<h2> You are a dog! </h2>
</div>
<div class="result" id="horse">
<h2> You are a horse! </h2>
</div>
<div class="result" id="fish">
<h2> You are a fish! </h2>
</div>关于javascript - 如何在html中添加更多值选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54136101/