1

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

http://jsfiddle.net/hvK8d/

====================== 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;
});
4

2 回答 2

3

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

用于隐藏模板的类：

.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++
  });
于 2012-07-23T17:49:07.563 回答
2

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

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

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

于 2012-07-23T17:05:19.930 回答