0

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

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

可以在http://jsfiddle.net/MrvYc/3/找到一个说明问题和我想要完成的小提琴

4

2 回答 2

1

要将标签与收音机链接，而不是使用 JS 变量来维护，您可以生成一个唯一的 ID，如 GUID，并直接使用它。

删除块时，不需要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 容器

于 2012-10-16T23:09:47.690 回答
0

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

<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>
于 2012-10-16T23:08:22.470 回答