Question

我正在尝试创建一组单选按钮，我可以通过单击按钮轻松克隆。由于基础HTML需要将标签附加到DOM树上的特定ID，因此我遇到了困难。我对如何使用javascript安全地将新代码注入DOM的理解是我不能使用ID，因为它们都需要是唯一的。是否有一种可接受的方法来进行这种类型的克隆而无需维护额外的javascript变量来将单选按钮ID组合在一起？

另外：我需要能够自由删除这些按钮组。

可以在http://jsfiddle.net/MrvYc/3/

找到解释问题的小提琴和我想要完成的事情。

Answer 1

要将标签与收音机相关联，而不是使用JS变量进行维护，您可以生成一个像GUID一样的唯一ID，并直接使用它。

当删除块时，不需要ID，因为你有块内的关闭HTMLElement，你可以使用parent（）函数和remove（）函数来完成这项工作。

以下是一个例子：

/**
 * Generate a guid part
 */
function GuidPart()
{
    return Math.floor(Math.random() * 0x10000).toString(16);
}

/**
 * Generate a new GUID
 */
function getGuid()
{
    return (GuidPart() + GuidPart() + "-" +
            GuidPart() + "-" +
            GuidPart() + "-" +
            GuidPart() + "-" +
            GuidPart() + GuidPart() + GuidPart());
}

/**
 * Build a new block with radio, label and close span
 */
function buildNewRadio(labelText)
{
    // Retrieve a new guid
    var guid = getGuid();

    // Create a span container with the radio and label inside
    // linked together by the guid
    var container = $(document.createElement("span")).append(
        $(document.createElement("input")).attr('id', guid),
        $(document.createElement("label")).attr('for', guid).val(labelText))
        .addClass("container");

    // Finally append the close span (use to remove the entiere block)
    container.append(
        $(document.createElement("span").addClass("close")
            .click(function(mouseEvent) {
                // Retrieve the span container and remove it
                $(this).parent().remove();
            }));

    return container;
}

您可以调用buildNewRadio函数并将结果HTMLElement附加到DOM容器

Answer 2

每次将新输入添加到DOM时，我通常只会将自动生成的ID增加1：

<input type="button" id="addRadio" value="Add Radio Button" />
            <div id="container">
                <input type="radio" name="myRadio" id="myRadio1" />
                <label for="myRadio1">Radio 1</label>
            </div>

<script type="text/javascript">
            $(document).ready(function() {
                var maxId = 0;
                $('#addRadio').click(function() {
                    var nextId = (!maxId) ? $("input[name='myRadio']").length + 1 : maxId + 1;
                    var wrap = $('<div>').attr('id', 'wrap' + nextId);
                    wrap.append($('<input>').attr({
                        type : 'radio',
                        name : 'myRadio',
                        id : 'myRadio' + nextId
                    }));
                    wrap.append($('<label>').attr({
                        for : 'myRadio' + nextId
                    }).html('Radio' + nextId));
                    wrap.append($('<a>').attr({
                        href : 'javascript:void(0);'
                    })
                    .click(function() {
                        $('#wrap' + nextId).remove();
                    })
                    .html('Delete'));
                    $('#container').append(wrap);

                    maxId = nextId;
                });
});
</script>

如何动态地向页面添加单选按钮集

2 个答案: