因此,我正在构建带有9个问题和ID的琐事游戏,喜欢prependToTo,然后分配不同的值,这样我就可以使用带有答案数组的Submit按钮来检查正确和不正确的值。主要问题是,无论我如何使用for循环,值总是一样,因此无法检查它们。到目前为止的代码看起来像这样,除了将它们硬编码为html之外,任何人都可以想到更好的方法吗?
$(document).ready(function () {
// globals
answersArray = [3, 2, 3, 3, 1, 4, 4, 3, 3];
userChoiceArray = [];
correctAnswers = 0;
incorrectAnswers = 0;
unansweredQuestions = 0;
$("#submit-button").on("click", function () {
for (var i = 1; i < 10; i++) {
var userChoices = $("[name='" + i + "']:checked")
}
if (userChoices != null) {
userChoiceArray.push(userChoices.val())
console.log(userChoices.val())
}
console.log(userChoiceArray)
})
// for loop to attach radio buttons to the list items with different names so they can be selected correctly
for (var i = 1; i < 10; i++) {
$("<input type='radio' name='" + i + "' />").prependTo('ul[class=question' + i + '] li');
for (var j = 1; j < 5; j++) {
$("li input").attr("value", j)
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container bg-warning">
<h1 class="row header justify-content-center">Zelda: Ocarina of Time Trivia!!!</h1>
<!-- name of ranch that you race at to get epona -->
<!-- name of the girl on the ranch link is offered to marry by her father -->
<section class="quesions-section">
<div class="row justify-content-center">
<h4>Question #1 Who are the three Godesses who created the entire land of Hyrule?</h4>
</div>
<div class="row justify-content-center">
<ul class="question1">
<li>Ordona, Faron, Eldin</li>
<li>Hylia, Lanayru, Valoo</li>
<li>Farore, Naryu, Din</li>
<li>Jabun, Jabu-Jabu, Levias</li>
</ul>
</div>
<div class="row justify-content-center">
<h4>Question #2 What were they the Godesses of?</h4>
</div>
<div class="row justify-content-center">
<ul class="question2">
<li>The Hunt, Agriculture, Freedom</li>
<li>Courage, Wisdom, Power</li>
<li>Sky, Sea, Afterlife</li>
<li>War, Arts, The Sun</li>
</ul>
</div>
<div class="row justify-content-center">
<h4>Question #3 What is the name of the Goron Chief's son?</h4>
</div>
<div class="row justify-content-center">
<ul class="question3">
<li>Goro</li>
<li>Boro</li>
<li>Link</li>
<li>Chief Jr.</li>
</ul>
</div>
<div class="row justify-content-center">
<h4>Question #4 Who do you give the spooky mask to on the Mask of Truth sidequest?</h4>
</div>
<div class="row justify-content-center">
<ul class="question4">
<li>Happy Mask Salesman</li>
<li>The Guard</li>
<li>The Running Man</li>
<li>The Graverobber's Son</li>
</ul>
</div>
<div class="row justify-content-center">
<h4>Question #5 What is Link's first sword called?</h4>
</div>
<div class="row justify-content-center">
<ul class="question5">
<li>Kokiri Sword</li>
<li>Master Sword</li>
<li>Faron Sword</li>
<li>Deku Sword</li>
</ul>
</div>
<div class="row justify-content-center">
<h4>Question #6 What is the name of the best sheild that Link obtains?</h4>
</div>
<div class="row justify-content-center">
<ul class="question6">
<li>Deku Sheild</li>
<li>Master Sheild</li>
<li>Beattle Sheild</li>
<li>Mirror Sheild</li>
</ul>
</div>
<div class="row justify-content-center">
<h4>Question #7 What race lives in a waterfall?</h4>
</div>
<div class="row justify-content-center">
<ul class="question7">
<li>The Hylian's</li>
<li>The Deku</li>
<li>The Gerudo</li>
<li>The Zora</li>
</ul>
</div>
<div class="row justify-content-center">
<h4>Question #8 Which Boss do you fight inside Jabu-Jabu's Belly?</h4>
</div>
<div class="row justify-content-center">
<ul class="question8">
<li>King Dodongo</li>
<li>Morpha</li>
<li>Barinade</li>
<li>Bongo Bongo</li>
</ul>
</div>
<div class="row justify-content-center">
<h4>Question #9 Bonus: What can you see if you look into the right halway windows when you first meet Zelda?</h4>
</div>
<div class="row justify-content-center">
<ul class="question9">
<li>Ganondorf</li>
<li>Pictures of Zelda</li>
<li>Pictures of Super Mario 64</li>
<li>Pictures of the Royal Family</li>
</ul>
</div>
<div class ="text-center">
<input id="submit-button" class="btn btn-secondary" type="submit" value="Submit">
</div>
</section>
除了让您知道我的定位正确之外,不要担心html,而CSS将li插入行内。 我知道为什么它不起作用,它循环了36次,并在所有按钮上的所有按钮上都输入了4的值,只是在我的搜索和寻找想法中找不到更好的方法。
答案 0 :(得分:0)
所以这就是我发现的结果,不可能用此html在此方法中执行此操作,但是如果您在每个li元素上应用1-4类的类,则可以使用以下代码来解决
// for loop to attach radio buttons to the list items with different names so they can be selected once for each question
for (var i = 1; i < 10; i++) {
$("<input type='radio' name='" + i + "' />").prependTo('ul[class=question' + i + '] li');
}
// Create a class for each li to target the input correctly and assign values 1-4 for the radio buttons applied
for (var j = 1; j < 5; j++) {
$("." + j + " input").attr("value", j)
}