Question

很难确定如何使用克隆的jQuery对象为div内容中的每个id属性添加增量值。

===================== HTML =====================

    <div class="upload-file-container">
  <div class="uploadFile left clearfix">
    <input type="file" id="FileUpload1">
    <table id="RadioButtonList1">
      <tbody>
        <tr>
          <td><input type="radio" value="Resume"  id="RadioButtonList1_1">
            <label for="RadioButtonList1_1">Resume</label></td>
          <td><input type="radio" value="Letter of Recommendation"  id="RadioButtonList1_2">
            <label for="RadioButtonList1_2">Letter of Recommendation</label></td>
          <td><input type="radio" value="Other"  id="RadioButtonList1_3">
            <label for="RadioButtonList1_3">Other</label></td>
        </tr>
      </tbody>
    </table>
  </div>
  <a href="javascript:;" class="remove left">Remove</a> </div>
<div class=""><a class="plus" href="javascript:;">plus one</a></div>

===================== JQUERY =====================

    //Cloning upload file control
$('.remove').live('click', function () {
    if (confirm("Are you sure you wish to remove this item?")) {
        $(this).parent().slideUp('fast', function () {
            $(this).remove();
        });
    }
    return false;
});

$('.plus').click(function () {
    console.log('cloning');
    var divCloned = $('.upload-file-container:first').clone();
    divCloned.hide().insertAfter('.upload-file-container:last').slideDown('fast');
    return false;
});

Answer 1

为了完整起见，我将在这里提出一个使用“模板”的小解决方案。

隐藏模板的类：

.upload-file-container.template {
  display: none;
}

做替换的小功能：

$.fn.template = function(variables) {
  return this.each(function() {
    this.innerHTML = this.innerHTML.replace(/{{(.+)}}/g, function(match, variable) {
      return variables[variable];
    });
    return this;
  });
};

模板：

<div class="upload-file-container template">
  <div class="uploadFile left clearfix">
    <input type="file" id="FileUpload{{id}}">
    <table id="RadioButtonList{{id}}"><tbody>
      <tr>
        <td>
          <input type="radio" value="Resume"  id="RadioButtonList{{id}}_1">
          <label for="RadioButtonList{{id}}_1">Resume</label>
        </td>
      </tr>
    </tbody></table>
  </div>
</div>

用法：

var count = 0;

var divCloned = $(".upload-file-container.template")
  .clone()
  .removeClass("template")
  .template({
    id: count++
  });

Answer 2

您应该在RadioButtonList[]属性中使用类似数组的表示法（例如name），而不是使用带编号的ID，并将标签包裹在input s：

<td>
    <label for="RadioButtonList1_1">
        <input type="radio" value="Resume" name="RadioButtonList1[]">
        Resume
    </label>
</td>
<td>
    <label for="RadioButtonList1_2">
        <input type="radio" value="Letter of Recommendation" name="RadioButtonList2[]">
        Letter of Recommendation
    </label>
</td>
<td>
    <label for="RadioButtonList1_3">
        <input type="radio" value="Other" name="RadioButtonList3[]">
        Other
    </label>
</td>

P.S。您还应该考虑使用比 RadioButtonList 更具描述性的名称。

如何使用克隆的jQuery对象为div内容中的每个id属性添加增量值

2 个答案: