使用 for 循环附加多个单选按钮，然后为提交按钮分配不同的值

Question

所以我正在构建一个有 9 个问题的琐事游戏，并且我喜欢 prependTo 然后分配不同的值，以便我可以使用带有我的答案数组的提交按钮来检查正确和不正确的值。主要问题是，无论我如何使用 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>

除了让您知道我的目标正确并且 css 将 li 的内联之外，不要担心 html。 我知道为什么它不起作用，它循环了 36 次，并且在每个 li 上的所有按钮上都设置了 4 的值，只是在我的搜索和寻找想法中找不到更好的方法。

Answer 1

所以这就是我发现的，用这个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)
}