0

ボタンのクリックで簡単に複製できるラジオボタンのセットを作成しようとしています。基礎となる HTML では、DOM ツリー上の特定の ID にラベルを付ける必要があるため、問題が発生しています。JavaScript を使用して新しいコードを DOM に安全に挿入する方法についての私の理解では、ID はすべて一意である必要があるため使用できないということです。ラジオボタン ID をまとめるための追加の JavaScript 変数を維持する必要なしに、このタイプのクローン作成を行う方法として認められているものはありますか?

また、これらのボタン セットを自由に削除できるようにする必要があります。

問題と私が達成しようとしていることを示すフィドルは、http://jsfiddle.net/MrvYc/3/にあります。

4

2 に答える 2

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 コンテナーにアタッチできます。

于 2012-10-16T23:09:47.690 に答える
0

通常、新しい入力が 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>
于 2012-10-16T23:08:22.470 に答える