理解click（），change（）和输入范围

Question

就输入和点击或检查而言，我试图了解范围。我正在研究一个项目，我想做的是。问他们是否经常工作，他们会回答是或否。那么无论哪种方式，我都会问他们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()

我想我的问题是如何通过点击，检查和输入来完成此操作。似乎无论我在哪里添加复选框到我拥有的东西，它都不会因某些原因而起作用。第一个问题会出现问题......你们经常锻炼吗？一个问题不会存在。或者我会得到一个邮政时代。我有一个小提琴。如果有人告诉我如何使它工作......或者更好地告诉我它是否正常工作，我将非常感激。我认为这会帮助很多人。我在这里看到了很多关于这个问题的好答案，但是没有工作的例子。我认为对某些人来说最有用的是他们可以看到的一个实例，我知道这对我来说。

在我的小提琴中，我正在为我提出的问题回收相同的输入。无论他们是否成功，我都想做得好，但不是我的主要问题。

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

Answer 2

我将以我的例子给出javascript模式的一些介绍。你可以在http://addyosmani.com/resources/essentialjsdesignpatterns/book/阅读它们并不容易阅读，但是当你准备就绪时，你将会理解如何用这本书整理你的javascript代码。

与此同时，我建议您阅读有关如何使用http://net.tutsplus.com/tutorials/html-css-techniques/20-html-forms-best-practices-for-beginners/

的良好实践对表单进行编码的信息

此外，这里有关于如何使用点击和表单http://jsfiddle.net/ncubica/BQaYz/

的工作示例

HTML

<label><input type="Radio" name="gender" id="male" value="male" /> male</label>
<label><input type="Radio" name="gender" id="female" value="female" />female</label>
<input type="text" id="name" placeholder="name" />
<input type="text" id="lastname" placeholder="lastname" />
<input type="button" id="submit" value="store" />

的javascript

var survey = (function(_module){
    var modulename = _module;
    var user = {};
    /*private methods*/

    function init(){
        observers();
    }

    function observers(){
        $(document).on("click","#submit", survey.store)
    }

    /*public methods*/
    $r = {}

    $r.store = function(){
        user.name = $("#name").val();
        user.lastname = $("#lastname").val();
        user.gender = $("input:radio[name=gender]:checked").val();
        survey.toString();
    }

    $r.toString = function(){
        var genderStr = (user.gender == "male") ? "Man" : "Girl";
        alert(user.name + " " + user.lastname + " is " + genderStr);
    }

    $r.init = function(){
        init();
    }

    return $r;
})("survey")

survey.init();

好吧，我知道起初看起来有点“大”的代码但是非常简单，在javascript中变量可以采用从函数到普通字符串的任何形式。

这里我们正在与anonymous functions合作创建一个模块将帮助我们更清晰地工作，这个变量将有2种方法和变量，公共和私有。

对于make一个方法public我们必须在完成运行代码后返回对象中的方法这就是为什么存在$r变量，它是一个具有属性功能的对象，并且在结尾处使用此模式使用return $r返回的代码现在您可以轻松地导航throw方法并捕获诸如点击，更改等事件....

你只需要将这个事件添加到方法observers创建一个私有或公共函数，它将在你完成事件后激活。

阅读代码，如果您有任何进一步的问题，您可以问我任何问题。我试着解决你的问题并构建你的代码。

祝你好运

Answer 3

[Here is below answer as a jsFiddle]

这个答案是作为首发。我尝试在初学者级别编写它，以便您可以自己定制它。希望这个简单的例子可以给你一个起点。我用了一个训练馆的例子来询问用户的一些基本问题。

我的方法是创建一个名为#ques的空DIV，其中将显示所有问题和输出，以及包含将存储响应的隐藏字段的隐藏<form>。

我创建了一个计数器cnt，在每个问题后递增。

有一个名为ask_next_ques()的函数，它接受参数cnt。根据我们在调查中的位置，它会询问下一个问题（例如，当cnt == 3时它会询问第三个问题）。

不幸的是，javascript坚持认为所有字符串都在一行上。因此，我构建了这样的html：

var qq = '
    <ul style="list-style:none">
        <li>
            What can you curl?<br />
            <input type="text" id="curl"> Kg
        </li>
        <li>
            What can you bench?<br />
            <input type="text" id="bench"> Kg
        </li>
        <li>
            What can you lift?<br />
            <input type="text" id="lift"> Kg
            <input type="button" id="cbl_btn" value="Go">
        </li>
    </ul>
';

然后将其重新排列在一行上，如下所示：

var qq = '<ul style="list-style:none"><li>What can you curl?<br /><input type="text" id="curl"> Kg</li><li>What can you bench?<br /><input type="text" id="bench"> Kg</li><li>What can you lift?<br /><input type="text" id="lift"> Kg<input type="button" id="cbl_btn" value="Go"></li></ul>';

以这种方式阅读起来要困难得多，但这就是javascript想要的东西。

在回答每个问题时，javascript / jQuery会读取响应，然后保存到<form>结构中的隐藏字段中。

当问到所有问题时，您可以将表单发布到另一个（PHP？）文件进行处理（存储在MySQL数据库中？），或将答案通过电子邮件发送给自己，或者将其重新显示给用户，或者...我选择在灯箱中显示答案。

这是所有代码。只需将其复制/粘贴到单个HTML或PHP文件中即可运行。

SURVEY.PHP

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /><!--Lightbox-->
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script><!--Lightbox-->

        <style>
        </style>

        <script type="text/javascript">

            //Declare vars outside document.ready() so they can be accessed globally
            var ctr = 1;
            var mf = '';
            var pl = '';

            $(document).ready(function() {

                ask_next_ques(ctr);

                /* ------------------------------------------------------------ */
                $("input:radio[name=gender]").click(function() {
                    //Note: var mf must be initialized above (outside document.ready() ) so can be used in below fn ask_next_ques()
                    mf = $('input:radio[name=gender]:checked').val();
                    $('#hgender').val(mf);
                    ctr++;
                    ask_next_ques(ctr);
                });
                /* ------------------------------------------------------------ */
                $(document).on('click', "#cbl_btn", function() {
                    var cc = $("#curl").val();
                    var bb = $("#bench").val();
                    var ll = $("#lift").val();

                    //alert('Value of cc: ' +cc+ '   Value of bb: ' +bb+ '     Value of ll: ' + ll);

                    //Check if any one of these fields left empty
                    if (cc.length<1 || bb.length<1 || ll.length<1) {
                        alert("Please complete all fields");
                    }else{
                        $('#hcurl').val(cc);
                        $('#hbench').val(bb);
                        $('#hlift').val(ll);
                        ctr++;
                        ask_next_ques(ctr);
                    }
                });             
                /* ------------------------------------------------------------ */
                $(document).on('click', "input:radio[name=plan]", function() {
                    //Note: var pl must be initialized above so can be used in below fn ask_next_ques()
                    pl = $('input:radio[name=plan]:checked').val();
                    $('#hplan').val(pl);
                    ctr++;
                    ask_next_ques(ctr);
                });
                /* ------------------------------------------------------------ */

            }); //END $(document).ready()

            function ask_next_ques(ctr) {
                if (ctr==1) {
                    var qq = 'Male: <input value="Male" type="radio" name="gender"><br />Female: <input value="Female" type="radio" name="gender">';
                    $('#ques').html(qq);
                }else if (ctr==2){
                    var qq = '<ul style="list-style:none"><li>What can you curl?<br /><input type="text" id="curl"> Kg</li><li>What can you bench?<br /><input type="text" id="bench"> Kg</li><li>What can you lift?<br /><input type="text" id="lift"> Kg<input type="button" id="cbl_btn" value="Go"></li></ul>';
                    $('#ques').html(qq);
                }else if (ctr==3){
                    var qq = 'Are you an:<br />Owner: <input value="Owner" type="radio" name="plan"><br />Member: <input value="Member" type="radio" name="plan">';
                    $('#ques').html(qq);
                }else if (ctr==4){
                    //All questions have been asked; All responses saved into hidden fields
                    //Can now read all hidden fields and do an AJAX POST into the database, or
                    //Or can simply POST the form to another page for processing.
                    alert("All questions have been asked");

                    var hg = $('#hgender').val();
                    var hc = $('#hcurl').val();
                    var hb = $('#hbench').val();
                    var hl = $('#hlift').val();
                    var hp = $('#hplan').val();
                    qq = 'The values saved into all hidden fields are:<br />Gender: ['+hg+ ']<br />Curl: [' +hc+ ']<br />Bench: [' +hb+ ']<br />Lift: [' +hl+ ']<br />Plan: [' +hp+ ']<br />You can now send these values to a<br />database, or email them to yourself.';
                    $('#ques').html(qq);

                    //We could just leave it here, but to be interesting we'll display the results in a lightbox
                    //To remove all lightbox stuff, just delete the next 8 lines and delete the two lightbox references in the header (for jquery-ui)
                    $('#ques').dialog({
                        autoOpen:true,
                        width: 450,
                        title: "Hidden Field Valuess:",
                        close: function() {
                            alert('Thank you for taking our survey');
                        }
                    });
                }
            }
        </script>
    </head>
<body>


    <div id="ques"></div>
    <div id="hidden_form">
        <form method="POST">
            <input type="hidden" id="hgender" name="gender">
            <input type="hidden" id="hcurl" name="curl">
            <input type="hidden" id="hbench" name="bench">
            <input type="hidden" id="hlift" name="lift">
            <input type="hidden" id="hplan" name="owner">
        </form>
    </div>

</body>
</html>