单选按钮jQuery的返回值 [英] Returning Value of Radio Button Jquery

问题描述

我试图弄清楚为什么在运行此代码时，我的正确答案变得不确定.

I am trying to figure out why, when I run this code, I am getting undefined for my correct answers.

$(document).ready (function () {
//  

var answers = 
[["Fee","Fi","Fo"], 
["La","Dee","Da"]],
questions = 
["Fee-ing?",
"La-ing?"],
corAns = ["Fee", "La"];

var counter = 0;

var $facts = $('#main_ .facts_div'),
$question = $facts.find('.question'),
$ul = $facts.find('ul'),
$btn = $('.myBtn');


$btn.on('click', function() {
    if (counter < questions.length) {
        $question.text(questions[counter]);

        var ansstring = $.map(answers[counter], function(value) {
            return '<li><input type="radio" name="ans" value="0"/>'
            + value + '</li>'}).join('');
        $ul.html(ansstring);

        var currentAnswers = $('input[name="ans"]:checked').map(function() {
            return this.val();
        }).get();

        var correct = 0;
        if (currentAnswers[counter]==corAns[counter]) {
            correct++;
        }

    }
    else {
        $facts.text('You are done with the quiz ' + correct);
        $(this).hide();
    }
        counter++;
});


//    
});

这很长，对此我感到抱歉，但是我真的不知道如何将其剥离.

It is quite long and I'm sorry about that, but I don't really know how tostrip it down.

我也意识到这不是最优雅的方法，但我只是想知道为什么我似乎无法获得我的无线电值.

I also realize this isn't the most elegant way to do this, but I just want to know why I can't seem to get my radio values.

如果有人愿意，我也会添加标记.

I will add the markup as well if anyone wants.

 <div id="main_">
    <div class="facts_div">
        <span class="question"></span>
        <ul></ul>
    </div>
    <div id = "next_button">
    <form>
        <input id="x" type="button" class="myBtn" value="Press Me">
    </form>
    </div>
</div>
</div>

推荐答案

尝试

$(document).ready(function () {
    //  

    var answers = [
        ["Fee", "Fi", "Fo"],
        ["La", "Dee", "Da"]
    ],
        questions = ["Fee-ing?",
            "La-ing?"],
        corAns = ["Fee", "La"];

    var counter, correct = 0;

    var $facts = $('#main_ .facts_div'),
        $question = $facts.find('.question'),
        $ul = $facts.find('ul'),
        $btn = $('.myBtn');


    $btn.on('click', function () {

        if (counter >= 0) {
            var ans = $('input[name="ans"]:checked').val();
            if (!ans) {
                alert('please select an answer');
                return;
            }
            console.log(ans, counter, corAns[counter])
            if (ans == corAns[counter]) {
                ++correct;
            }

            counter++;
        } else {
            counter = 0;
        }


        if (counter < questions.length) {
            $question.text(questions[counter]);

            var ansstring = $.map(answers[counter], function (value) {
                return '<li><input type="radio" name="ans" value="' + value + '"/>' + value + '</li>'
            }).join('');
            $ul.html(ansstring);
        } else {
            $facts.text('You are done with the quiz ' + correct);
            $(this).hide();
            $('#correct').text()
        }
    });


    //    
});

演示:小提琴

这篇关于单选按钮jQuery的返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！