如何为克隆生成的新卡片内的单选按钮自动设置递增的name属性

问题原因 #

你的代码存在3个核心逻辑错误，导致功能只能生效一次：

• 赋值运算符写反：radioID =+ 1 属于语法逻辑错误，实际效果是把radioID赋值为固定值1，不会做累加计算，所以每次生成的name都是radio-1
• 操作对象错误：你查询的是原卡片内的单选按钮，修改的也是原卡片的name属性，不是新克隆出来的卡片的元素，原卡片属性被修改后后续克隆读取的初始值就会出错
• 同组单选逻辑错误：同一张卡片内的单选按钮属于同一组，name属性必须完全相同才能实现互斥选择，你原来的代码循环给每个单选按钮累加ID，会导致同卡片的单选可以多选，不符合业务需求

修正后代码 #

// 简化后的name属性设置函数
function nameRadioButtons(radioButtons, newRadioId) {
    radioButtons.forEach((element) => {
        element.setAttribute("name", "radio-" + newRadioId);
    });
}

// 修正后的克隆函数
function cloneQuestion() {
    var question = document.querySelector(".questions");
    var clone = $(question).clone(true, true).get(0);
    // 直接用现有卡片数量作为新ID，第一张克隆的卡片对应ID为1，第二张对应2，符合你的需求
    var newRadioId = $(".questions").length;
    // 只查询克隆出来的新卡片内的单选按钮
    var radioButtons = clone.querySelectorAll(".radioItemToggle");
    nameRadioButtons(radioButtons, newRadioId);
    clone.querySelector(".questionMainTextArea").value = "Untitled Question";
    var addBtn = document.querySelector(".addQuestionBtnRow");
    var tbody = addBtn.parentNode;
    tbody.insertBefore(clone, addBtn);
}

内容的提问来源于stack exchange，提问作者Abdelrahman Tamer