0

我正在用 javascript 做一个测验生成器(类似于“google form”)。人们可以添加和删除“多项选择题”。每次添加问题时,我都会在问题输入(textarea)上设置一个“data-id”属性。要将多个选择链接到问题,我根据上面的数据 ID 动态设置其名称。像这样:

一切都很好,除非我删除了一个问题。假设我添加了 3 个问题,我决定删除第二个问题。所以我将 data-id "3" 更新为 "2" 并更新了选项的名称。

问题是数据ID已成功更改(在html中)。但不是当我试图得到新的。

这是我的代码:

/* First initialisation */
initNamesQuestion();
initNamesOptions();
$('.question').on('click', '.removeMCQ', function () {
    $(this).parent('div').remove(); // Delete the question block
    /* Update name and data-id */
    initNamesQuestion();
    initNamesOptions();
});
function initNamesQuestion() {
    var nbQuestions = $('.row.question').length; // count questions
    var arrayQuestions = $('.inputQuestion'); // get array of textarea questions
    for (var i = 0; i < arrayQuestions.length; i++) {
        arrayQuestions[i].name = "questions[" + (nbQuestions) + "][]"; // For each question, we change its name
        arrayQuestions[i].setAttribute('data-id', nbQuestions); // set or update a "data" attribute to link options' names
    }
}
function initNamesOptions() {
    var arrayOptions = $('.fake-radiobutton'); // get array of all options
    for (var i = 0; i < arrayOptions.length; i++) {
        var questionID = $(arrayOptions[i]).closest('.card-body').find('.inputQuestion').data('id'); // Get the data-id of the question above
        $(arrayOptions[i]).attr('name',"options[" + (questionID) + "][]"); // set or update the name attribute of the option
    }
}

这是 HTML 中的结果:

图片

4

0 回答 0