javascript - 理解 click()、change() 和输入范围

Question

我试图了解输入和点击或检查方面的范围。我正在做一个项目，我正在努力做的是。问他们是否经常锻炼，他们会回答"is"或“否”。然后我会问他们 3 个问题。我会问他们能卧推多少，深蹲能多少，弯举能多少。我已经设置了这部分，我将根据他们输入的内容向他们提供反馈。我想做的是添加一个复选框，供他们选择是男性还是女性。我想我应该这样做

function one() {
    a = 100;
    b = 200;
    c = 300;
    return two();

    function two() {
        a += a;
        b += b;
        c += c;
        return three();

        function three() {
            a += 1;
            b += 1;
            c += 1;
            return four();

            function four() {
                console.log(a, b, c);
            }
        }
    }
}
one()

我想我的问题是如何通过点击、检查和输入来做到这一点。似乎无论我在哪里添加复选框，由于某种原因它都不起作用。要么第一个问题就有问题……你锻炼得很多吗？ a 问题不会出现。或者我会得到一个后时代。我下面有一个 fiddle 。如果有人告诉我如何让它发挥作用……或者更好地向我展示它的运作方式，我将非常感激。我想这会对很多人有所帮助。我在这里看到了这个问题的很多很好的答案，但没有有效的例子。我认为对某些人来说最有帮助的是他们可以看到一个可行的示例，我知道这适合我。

在我的 fiddle 中，我正在为我所问的问题回收相同的输入。无论它们是否有效，我都想正确地做到这一点，但这不是我的主要问题。

http://jsfiddle.net/vicky1212/G24aQ/10/

Answer 1

我在代码中添加了一些解释..

$('.myOptions').change(function () {
    // Remove the active class
    $('.list').removeClass('active');
    // Add the active class
    // this.value holds the current value that is selected
    // No need to use filter 
    $('.' + this.value).addClass('active');
});

$('#butt').click(function () {
    // Better to have Lesser variables ,  
    var active = $('.list.active'),
        $boxOne = active.find('.box1'),
        $boxTwo = active.find('.box2'),
        $boxThree = active.find('.box3'),
        $output = $('#output'),
        total = (parseInt($boxOne.val(), 10) + parseInt($boxTwo.val(), 10) + parseInt($boxThree.val(), 10)),
        msg = '';

    $output.addClass('error');
    var dropdownValue = $('.myOptions').val(),
        // you need to select the inputs specifically
        // you were trying to access it using $('input') that gives the list of all the inputs
        // on your page.. So you need to be more specific
        $genderRadio = $('input[name=gender]');
    // If dropdown is empty show some message
    if (dropdownValue === '') {
        msg = 'Please select an option....';
    } else if (isNaN(total)) {
        msg = 'Input three numbers, please...';
    } // If gender is not selected show a specific message
    else if ($genderRadio.filter(':checked').length === 0) {
        msg = 'Please select your gender....';
    } else {
        // If it comes to this statemenet it means there is no error
        // remove the error class
        $output.removeClass('error');
        if (total < 14) {
            msg = "That's bad, should be higher...";
        } else if (total > 15) {
            msg = "That's bad, should be lower...";
        } else {
            msg = "You got it... Nice work.";
        }

        var genderPrefix = $genderRadio.filter(':checked').val() === 'Male' ? 'Sir..' : 'Miss..';
        msg = genderPrefix + msg;
    }

    $output.text(msg);
});

<强> Check Fiddle