1

入力とクリックまたはチェックに関する限り、範囲を理解しようとしています。私はプロジェクトに取り組んでおり、私がやろうとしていることは. 彼らがよく運動するかどうか尋ねると、彼らはイエスまたはノーと答えます. それから私は彼らにいずれかの方法で 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()

私の質問は、クリックとチェックと入力でこれを行う方法だと思います。チェックボックスをどこに追加しても、何らかの理由で機能しないようです。最初の質問に問題があるか... あなたはよく運動しますか? 質問はありません。または私はポストの時代を取得します。以下にフィドルがあります。誰かがそれを機能させる方法を教えてくれたら...またはそれが機能していることをもっとよく見せてくれれば、とても感謝しています。これは多くの人を助けると思います。ここでこの質問に対する良い答えをたくさん見ましたが、実際の例はありません。一部の人々にとって最も役立つことは、彼らが見ることができる実際の例であると思います。それが私のためであることはわかっています。

ps私のフィドルでは、私が求めている質問に対して同じ入力をリサイクルしています。うまくいくかどうかにかかわらず、私はそれをきちんとやりたいと思っていますが、私の主な問題ではありません.

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

4

3 に答える 3

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

フィドルをチェック

于 2013-07-02T23:59:54.483 に答える
0

[以下は jsFiddle としての回答です]

この回答は、スターターとして意図されています。自分でカスタマイズできるように、初心者レベルで書いてみました。この簡単な例が出発点になることを願っています。ユーザーにいくつかの基本的な質問をするトレーニング ジムの例を使用しました。

#ques私のアプローチは、すべての質問と出力が表示されるという空の DIV と<form>、応答を格納する非表示フィールドを含む非表示の DIV を作成することでした。

cnt各質問の後にインクリメントされるカウンターを作成しました。

ask_next_ques()パラメータを取るという関数がありますcnt。調査のどこにいるかに応じて、次の質問が表示されます (たとえば、cnt==3 の場合、3 番目の質問が表示されます)。

残念ながら、JavaScript はすべての文字列を 1 行に収めることを要求しています。したがって、次のような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>
';

次に、次のように 1 行に再配置します。

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?) ファイルに POST して処理する (MySQL データベースに保存する?) か、回答を自分宛てに電子メールで送信するか、ユーザーに再表示するか、または.. . 回答をライトボックスに表示することにしました。

これがすべてのコードです。コピーして 1 つの 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>
于 2013-07-03T16:24:43.983 に答える