javascript - 了解 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()

我想我的问题是如何通过点击、检查和输入来做到这一点。似乎无论我将复选框添加到我所拥有的位置，它都将由于某种原因不起作用。第一个问题会有问题......你锻炼很多吗？a 问题不会存在。否则我将进入一个后时代。我在下面有一个小提琴。如果有人能告诉我如何让它工作......或者更好地告诉我它工作，我将非常感激。我想这会帮助很多人。我在这里看到了很多关于这个问题的好答案，但没有有效的例子。我认为对某些人最有帮助的是他们可以看到的工作示例，我知道这对我有用。

ps 在我的小提琴中，我正在为我提出的问题回收相同的输入。无论他们是否成功，我都想正确地做到这一点，但这不是我的主要问题。

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);
});

检查小提琴

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 种方法和变量，公共和私有。

为了使方法公开，我们必须在完成运行代码后返回对象中的方法，这就是为什么存在$r变量，它是一个具有属性功能的对象，并且在代码的末尾你返回它做return $r这个模式现在您可以轻松导航 throw 方法并捕获单击、更改等事件。

您只需将此事件添加到方法中，observers创建一个私有或公共函数，该函数将在事件完成后激活。

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

祝你好运

Answer 3

[以下是作为 jsFiddle 的答案]

此答案旨在作为入门。我尝试以初学者的水平编写它，以便您可以自己定制它。希望这个简单的示例可以为您提供一个起点。我以健身房为例，询问用户的一些基本问题。

我的方法是创建一个名为 的空 DIV，#ques其中将显示所有问题和输出，以及一个隐藏<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 文件中，然后运行。

调查.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>