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

番号付き ID を使用する代わりにRadioButtonList[]、属性で配列のような表記 (例: ) を使用し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 に答える