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

时间:2018-11-16 05:07:08

标签: jquery html

因此,我正在构建带有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的值,只是在我的搜索和寻找想法中找不到更好的方法。

1 个答案:

答案 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)
}