使用jQuery克隆表單字段並增加'id'和'for'屬性？

Question

我期待在創建RSVP形式：

http://adrianandemma.com/

該表單包含一個客人的名字和是/否單選按鈕。

我添加了一個選項來添加名爲歸檔和單選按鈕的'添加更多客人'，但他們保持相同的ID和屬性，所以單選按鈕特別容易混亂！

是否有一種方法比克隆名稱和無線電領域我還可以修改ID和元素呢？

也許有初始字段爲id =「guest1」和收音機爲=「guest1-yes」/ for =「guest1-no」，然後每次克隆時都有這些增量？

這裏是我到目前爲止的代碼：

HTML：

<div class="form-row guest"> 
    <div class="field-l"> 
     <input type="text" name="name" id="name" required /> 
    </div> 
    <div class="field-r"> 
     <input type="radio" name="coming" id="coming-yes" value="Yes" required><label for="coming-yes">Yes</label> 
     <input type="radio" name="coming" id="coming-no" value="No"><label for="coming-no">No</label> 
    </div> 
</div> 
<a class="addguest" href="#">Add further guest</a> 

的jQuery：

$('.addguest').on('click', function(e) { 
     e.preventDefault(); 
     $('.guest').first().clone().find("input").val('').end().insertBefore(this); 
    }); 

，這裏是它是如何佈局：

任何幫助都會很棒，因爲我尋找類似的問題，但無法得到任何工作！

Answer 1

爲了遞增ID和你的輸入和標籤領域的維權，你可以使用：

.attr(attributeName, function)

在你的CSS，你需要改變的：

.field-r input[type="radio"]#coming-yes+label { 
    cursor: url('/assets/images/happy.png'), pointer;  
} 
.field-r input[type="radio"]#coming-no+label { 
    cursor: url('/assets/images/sad.png'), pointer; 
} 

要：

.field-r input[type="radio"].coming-yesRadio+label { 
    cursor: url('/assets/images/happy.png'), pointer; 
} 
.field-r input[type="radio"]..coming-noRadio+label { 
    cursor: url('/assets/images/sad.png'), pointer; 
} 

取而代之的是，在CSS中使用id來對每個元素進行尋址，您可以使用 一類。這意味着將相應的類添加到您的輸入元素。

的片段：

$('.addguest').on('click', function(e) { 
 
    e.preventDefault(); 
 
    // 
 
    // get the current number of ele and increment it 
 
    // 
 
    var i = $('.guest').length + 1; 
 
    $('.guest').first().clone().find("input").attr('id', function(idx, attrVal) { 
 
     return attrVal + i; // change the id 
 
    }).attr('name', function(idx, attrVal) { 
 
     return attrVal + i; // change the name 
 
    }).val('').removeAttr('checked').end().find('label').attr('for', function(idx, attrVal) { 
 
     return attrVal + i; // change the for 
 
    }).end().insertBefore(this); 
 
});

@font-face { 
 
    font-family: 'dk_vermilionregular'; 
 
    src: url('http://adrianandemma.com/assets/fonts/dk_vermilion-webfont.woff2') format('woff2'), 
 
    url('http://adrianandemma.com/assets/fonts/dk_vermilion-webfont.woff') format('woff'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 
* { 
 
    font-weight:normal; 
 
    box-sizing:border-box; 
 
    font-family:'dk_vermilionregular', arial, sans-serif; 
 
} 
 
body { 
 
    font-family:'dk_vermilionregular', arial, sans-serif; 
 
    color:#363e3f; 
 
    line-height: 1.2; 
 
} 
 
.box { 
 
    text-align:center; 
 
    max-width: 60%; 
 
    margin:0 auto; 
 
} 
 
h1 { 
 
    font-size:86px; 
 
    margin:0.5em 0; 
 
} 
 
h1 span { 
 
    display:block; 
 
    font-size: 40px; 
 
} 
 
h2 { 
 
    font-size:68px; 
 
    margin:0.5em 0; 
 
} 
 
p { 
 
    font-size: 40px; 
 
    margin:0.5em 0; 
 
} 
 
a { 
 
    color: #363e3f; 
 
} 
 

 
a.btn { 
 
    display: inline-block; 
 
    font-size:24px; 
 
    color:#363e3f; 
 
    text-decoration: none; 
 
    padding:12px 20px 8px; 
 
    border:1px solid #363e3f; 
 
    margin: 20px 0 0; 
 
} 
 

 
/*** Images ***/ 
 
img { 
 
    max-width:100%; 
 
} 
 
img.ae { 
 
    width:260px; 
 
} 
 
img.ceremony { 
 
    width:300px; 
 
    margin:0 0 20px; 
 
} 
 

 
/*** Forms ***/ 
 
#rsvp { 
 
    z-index: 110; 
 
    display: table; 
 
    table-layout: fixed; 
 
    position: fixed; 
 
    width:100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    background: rgba(255,255,255,1); 
 
} 
 

 
.form-container { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
form { 
 
    width: 600px; 
 
    max-width: 60%; 
 
    margin:0 auto; 
 
} 
 

 
form p { 
 
    font-size:24px; 
 
    margin: 0; 
 
} 
 

 
.form-row { 
 
    overflow: auto; 
 
    margin:0 0 10px; 
 
} 
 

 
.field-l { 
 
    float:left; 
 
    width: 70%; 
 
    padding-right: 20px; 
 
} 
 

 
.field-r { 
 
    float:right; 
 
    width: 30%; 
 
    text-align: right; 
 
    cursor: default; 
 
} 
 

 
.field-l input { 
 
    display:block; 
 
    width: 100%; 
 
    height: 40px; 
 
    vertical-align: middle; 
 
    padding: 0 10px; 
 
    box-shadow: none; 
 
    border:1px solid #363e3f; 
 
} 
 

 
.field-r label { 
 
    font-size:20px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    display: inline-block; 
 
    padding: 0 10px; 
 
    border: 1px solid #ddd; 
 
    width: 40%; 
 
    margin:0 0 0 5px; 
 
    text-align: center; 
 
} 
 

 
.field-r input[type="radio"]:checked+label { 
 
    border: 1px solid #363e3f; 
 
} 
 

 
.field-r input[type="radio"].coming-yesRadio+label { 
 
    cursor: url('http://adrianandemma.com/assets/images/happy.png'), pointer; 
 
} 
 
.field-r input[type="radio"].coming-nosRadio+label { 
 
    cursor: url('http://adrianandemma.com/assets/images/sad.png'), pointer; 
 
} 
 

 
.field-r input { 
 
    width: 0; 
 
    margin: 0; 
 
    visibility: hidden; 
 
    cursor: default; 
 
} 
 

 
form button { 
 
    display: block; 
 
    width:100%; 
 
    border:1px solid #363e3f; 
 
    background: #fff; 
 
    margin:30px 0 0; 
 
    font-size: 24px; 
 
    padding: 10px 0 7px; 
 
    cursor: pointer; 
 
} 
 

 
form button:hover { 
 
    background: #fcfcfc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="form-row guest"> 
 
    <div class="field-l"> 
 
     <input type="text" name="name" id="name" required /> 
 
    </div> 
 
    <div class="field-r"> 
 
     <input type="radio" name="coming" class="coming-yesRadio" id="coming-yes" value="Yes" required><label for="coming-yes">Yes</label> 
 
     <input type="radio" name="coming" class="coming-yesRadio" id="coming-no" value="No"><label for="coming-no">No</label> 
 
    </div> 
 
</div> 
 
<a class="addguest" href="#">Add further guest</a>

Answer 2

試試下面的代碼

HTML

<div class="form-row guest"> 
<div class="field-l"> 
    <input type="text" name="name" id="guest1" required /> 
</div> 
<div class="field-r"> 
    <input type="radio" name="coming" id="guest1-yes" value="Yes" required><label for="coming-yes">Yes</label> 
    <input type="radio" name="coming" id="guest1-no" value="No"><label for="coming-no">No</label> 
</div> 
</div> 
<a class="addguest" href="#">Add further guest</a> 

jQuery的

var cloneIndex = $(".guest").length; 
$('.addguest').on('click', function(e) { 
    e.preventDefault(); 
    cloneIndex++; 
    $('.guest').first().clone() 
    .find("input") 
    .attr("id", "guest" + cloneIndex) 
    .val('').end() 
    .find('input:radio').each(function(idx) { 
     var id = $(this).attr('id'); 
     if(idx % 2 == 0){ 
     id += "-yes"; 
     } else {  
     id += "-no"; 
     } 
     $(this).attr('id',id); 
    }) 
    .val('').end() 
    .insertBefore(this); 
}); 

這裏是工作的jsfiddle：https://jsfiddle.net/y392jey4/2/

我想應該可以幫助你，