选择测验数后显示测验

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函数，我要重新单击选项框以使其正常显示。图片如下：

在：

后：

如果我重新选择我的问题数量，那么“之前”的图片会再次出现，这会让用户感到烦恼。 即使我重新选择我的选项，有没有办法让它像'After'一样？

更新： 链接到小提琴：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();