Question

我正在考虑创建一个RSVP表单：

表单包含访客姓名和是/否的单选按钮。

我添加了一个选项，以便进一步添加访客＆＃39;它克隆了名称字段和单选按钮，但它们保持相同的id和属性，所以特别是单选按钮搞砸了！

有没有一种方法我克隆名称和无线电字段我还可以修改id和元素？

也许初始字段为id =＆＃34; guest1＆＃34;和＆＃34; guest1-yes＆＃34; / for =＆＃34; guest1-no＆＃34;然后在每次克隆时都有这些增量？

到目前为止，这是我的代码：

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和FOR，您可以使用：

.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/

我认为它应该对你有帮助，

使用jQuery克隆表单字段并增加＆＃39; id＆＃39; ＆＃39;为＆＃39;属性？

2 个答案: