【JavaScript】- 在页面上添加删除一道题

我们都填过调查问卷，可是这问卷的网页是怎么做出来的呢，小编浅浅的研究了一下，在若干前辈的基础上捣鼓出了了一个非常简陋的模型，仅供大家学习。

$(function () {

    //fixed定位的加题按钮
    $("#btnAddRadioFixed").click(function () {
        insertRadio(4); //添加单选题，这里4的意思是添加4个选项
    });  
    //fixed定位的提交按钮
    $("#divSubmit").click(function () {
        sendData();
    });
});

我觉得添加题这块，最重要的就是模板的编写，用append把自己想要的样式拼好

//添加单选题
function insertRadio(OptionNum) {

    //获得当前已有题目的数量
    var QuestionNumber = getQuestionCount();

    //获得下一道题的题号
    var number = QuestionNumber + 1;

    //获得当前所有的选项数
    var optionNumber = $(".option").length;

    //添加题功能
    $("#insert").append("<div id='Num" + number + "' class='show' name='question'></div>");

    //一道题的模板
    //题号+输入题目标题框
    $("#Num" + number).append("<p class='paragraph1'><span id='" + number + "' class='questionNumber'>" + number + "</span>" + ' ' + "<textarea id='text" + number + "' cols='20' rows='2' class='content'>请在此输入题目标题</textarea>");

   //添加选项
    for (var i = 0; i < OptionNum; i++) {
        if (i == 0) {
            $("#Num" + number).append("<p class='paragraph'><input type='radio'/><textarea id='option" + optionNumber + "' class='option'>选项" + optionNumber + "</textarea><img id='addOption" + number + "' src='../images/add-option.png' alt='添加选项' title='添加选项' class='addOption' /><img id='deleteOption" + number + "' title='删除选项' src='../images/delete-option.png' alt='删除选项' class='deleteOption'/></p>");
        } else {
            $("#Num" + number).append("<p class='paragraph'><input type='radio'/><textarea id='option" + (optionNumber + i) + "' class='option'>选项" + (optionNumber + i) + "</textarea></p>");
        }

    }


    $("#Num" + number).append("<span><a class='deleteLink' title='删除本题' href='javascript:void(0)'>删除</a></span>");


    //设置删除题目的连接
    //删除一道题
    $(".deleteLink").click(function () {
        //删除该题
        $(this).closest(".show").remove();
        //修改id
        $(".show").each(function (i) {
            var Num = i + 1;
            this.id = "Num" + Num;
        });
        //修改题号
        $(".questionNumber").each(function (i) {
            var Num = i + 1;
            this.id = Num;
            $(this).html(Num);
        });
        //修改内容框id
        $(".content").each(function (i) {
            var Num = i + 1;
            this.id = "text" + Num;
        });
    });
    //划过某道题的时候，外框变成黄色
    $(".show").each(function (i) {
        $(this).hover(function () {
            $(this).css("border", "1px solid #FDB553 ");
        }, function () {
            $(this).css("border", "1px solid #EFEFEF ")
        })
    });

    //点击添加按钮，在当前选项下方添加一个选项
    $("#addOption" + number).click(function () {

        var allOptionNumber = $(".option").length;
        var optionNumber = $(this).closest(".show").children(".paragraph").length;
        //设置权重里的分数
        if (optionNumber <= 4) {
            weightScore = 100 - (20 * optionNumber);
        }
        else {
            weightScore = 20;
        }
        $(this).closest(".show").children(".paragraph").eq(optionNumber - 1).after("<p class='paragraph'><input type='radio'/><textarea id='option" + allOptionNumber + "' class='option'>选项" + allOptionNumber + "</textarea></p>");
        getDefault();

    });
    //点击删除按钮，在当前选项下方一个选项
    $("#deleteOption" + number).click(function () {
        //$(this).unbind();
        var optionNumber = $(this).closest(".show").children(".paragraph").length;
        if (optionNumber <= 2) {          
            alert("请最少保留两个选项");
            return false;
        }

        $(this).closest(".show").children(".paragraph").eq(optionNumber - 1).remove();
    })

    getDefault(); 

}

//选项框和权重框都有默认值，用户点击则清空默认值，若未填写任何内容则还原默认值
function getDefault() {
    $("textarea").each(function (i) {
        $(this).focus(function () {
            var txt_val = $(this).val();
            if (txt_val == this.defaultValue) {
                $(this).select();
            }
        });
    });
    $("textarea").each(function (i) {
        $(this).blur(function () {
            var txt_val = $(this).val();
            if (txt_val == "") {
                $(this).val(this.defaultValue);
            }
        });
    });

    $(".weight").each(function (i) {
        $(this).focus(function () {
            var txt_val = $(this).val();
            if (txt_val == this.defaultValue) {
                $(this).select();
            }
        });
    });

    $(".weight").each(function (i) {
        $(this).blur(function () {
            var txt_val = $(this).val();
            if (txt_val == "") {
                $(this).val(this.defaultValue);
            }
        });
    });

}

//获得当前页面上的题目数，兼容多浏览器
function getQuestionCount() {

    var countQuestion = 0;
    var elementDiv = document.getElementsByTagName("div");
    for (var i = 0; i < elementDiv.length; i++) {
        if (elementDiv[i].getAttribute("name") == "question") {
            countQuestion += 1;
        }
    }
    return countQuestion;
}

添加其他题也是类似，就不一一展示了