javascript - 选择测验数量后显示测验

Question

我实际上是为了自己的目的而制作了一个调查问卷网站。 我设法做一个循环，但我想我的 java 脚本顺序是错误的。 下面是我的代码:

<script>
        $(document).ready(function()
        {
            var string ="";
            for(var i=2;i<12;i++){
                string +="<option value='"+i+"'>"+(i-1)+"</option>";
                console.log('test');
            }
            $("#select-question-type").change(function(evt)
            {
                var selected = $(this).val();

                if (selected == "1"){
                    $(".show-qn").show();
                    $(".show-check").hide();
                } else if(selected == '2') {
                    $(".show-check").hide();
                    $(".show-qn").hide();                    
                } else if(selected == '3'){
                    $(".show-check").show();
                    $(".show-qn").hide();
                }

            }).change();


            $("#total_qn_number").html(string);

            $("#total_qn_number").change(function(e){
                console.log("changed");
                var counter = $(this).val();
                var appendString = "";
                console.log(counter);
                for(var x=1;x<counter;x++){
                    appendString+='<br />Question '+x+':<br /><textarea name="question' +x+'" placeholder="Type your question"></textarea><br /><div class="show-qn"><label></label>A1:<input type="text" name="answer1' +x+'" placeholder="Type your 1st option" /><br /><label></label>A2:<input type="text" name="answer2' +x+'" placeholder="Type your 2nd option" /><br /><label></label>A3:<input type="text" name="answer3' +x+'" placeholder="Type your 3rd option" /><br /><label></label>A4:<input type="text" name="answer4' +x+'" placeholder="Type your 4th option" /></div><div class="show-check"><input type="text" name="cb1' +x+'" placeholder="Type your 1st option" /><br /><input type="text" name="cb2' +x+'" placeholder="Type your 2st option" /><br /><input type="text" name="cb3' +x+'" placeholder="Type your 3st option" /><br /><input type="text" name="cb4' +x+'" placeholder="Type your 4st option" /><br /><input type="text" name="noOfCorrectAns' +x+'" placeholder="Type down the no of correct ans." /></div>';
                }
                $("#container").html(appendString);
            });
        });
    </script>

它实际上工作得很好，但问题在于显示和隐藏。 每当我选择选择框选项时，它实际上“重新启动”整个 js 本身，删除所有 .show 和 .hide 函数，我必须重新单击选项框才能正常显示。图片如下:

之前:

之后:

如果我重新选择问题数量，“之前”的图片会再次出现，这会让用户感到恼火。 有没有办法让它保持像“之后”，即使我重新选择我的选项？

更新: fiddle 链接:jsfiddle.net/537vh

Answer 1

这就是您要找的吗:http://jsfiddle.net/m69XP/2/

我将其放入一个函数中，该函数在两个选择框发生更改时调用

$("#select-question-type").change(function(evt)
                {
                    var selected = $(this).val();

                    if (selected == "1"){
                        $(".show-qn").show();
                        $(".show-check").hide();
                    } else if(selected == '2') {
                        $(".show-check").hide();
                        $(".show-qn").hide();                    
                    } else if(selected == '3'){
                        $(".show-check").show();
                        $(".show-qn").hide();
                    }
                    else{
                        $(".show-check").hide();
                    }
                }).change();