如何動態地將單選按鈕集添加到頁面

我正在嘗試創建一組單選按鈕，我可以輕鬆地將按鈕單擊克隆。由於底層HTML需要將標籤附加到DOM樹上的特定ID，因此我很困難。我對如何安全地將新代碼注入JavaScript的JavaScript的理解是，我無法使用ID，因爲它們都需要唯一。有沒有一種公認的方法來做這種克隆類型，而無需維護額外的JavaScript變量來錘擊單選按鈕ID？如何動態地將單選按鈕集添加到頁面

另外：我需要能夠自由刪除這些按鈕設置。

說明問題，我想要完成一個小提琴可以在http://jsfiddle.net/MrvYc/3/

來源

2012-10-16 D. G.

要將標籤與收音機鏈接起來，而不是使用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功能和HTML元素的結果連接到你的DOM容器

來源

2012-10-16 23:09:47 MatRt

我喜歡這種方法如何不要求我擔任任何現實DOM中的命名空間。我主要關心的是Math.random（）的隨機性。 [鏈接]（http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript）討論了創建GUID，並且一些評論指出沒有關於如何以及javascript符合熵要求以獲得完整的2^122範圍的正確形成的GUID。你有沒有遇到過使用此代碼的唯一性問題？ –

找到我通常只是增加了自動生成的ID通過各一個新的輸入被添加到DOM時間：

<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-16 23:08:22 marknatividad

如何動態地將單選按鈕集添加到頁面

回答

相關問題