Question

我正在尝试克隆div（多次）并添加增量，以便我可以使用XML将结果解析为数据库。我只想克隆表单部分而不是输入的数据。我正在克隆的Div有3个选择和2个无线电（添加时所有这些都需要为空）。

HTML

<div id="Template1" class="template">
    <div class="_100">
              <div class="_25"> <fieldset>   
<label class="label_analysis" for="analysis">Analyte:</label>
        <select class="select_analyte" name="analysis" id="analysis">
        <option value="">Select</option>
               <option value="TN">TN</option>
               <option value="TP,NO2+3">TP,NO2+3</option>
               </select>  </fieldset></div>
              <div data-role="controlgroup" class="_13">
          <label><input type="checkbox" data-mini="true" name="Filtered" id="Filtered" value="True">
              0.45u Filtered</label>
              <label><input type="checkbox" data-mini="true" name="Dup" id="Dup" value="True">
              Field Dup</label></div>

      <div class="_25"><fieldset>
          <label class="label_preserve" for="preserve">Preserved</label>
        <select class="select_preserve" name="preserve" id="preserve">
            <option value="">Select</option>
            <option value="HNO3">HNO&#8323;</option>
            <option value="H2SO4">H&#8322;SO&#8324;</option>
         </select></fieldset></div> 
    <div class="_20"> <fieldset> 
   <label class="label_cool" for="cool">Cooled</label>
        <select class="select_cool" name="cool" id="cool">  
            <option value="">Select</option>
               <option value="Ice">Ice</option>
               <option value="Frozen">Frozen</option>
               <option value="None">None</option>
            </select>
        </fieldset></div>

    <div class="_13">
        <a href="#" type="button" data-theme="e" data-mini="true" data-icon="add" title="Duplicate" class="showNew">Add Analyte</a>
        <a href="#" type="button" data-theme="e" data-mini="true" data-icon="delete" title="Remove" class="removeNew">Remove</a></div>
       </div>
    </div>
           <div id="place" class="place"></div>

我尝试了两种不同的脚本

这个脚本有效，因为我想隐藏原始div上的删除按钮，只有它出现在克隆上但不会增加。

     (function($){
    var Template = $('.Template');
    var count = 0;
    $('.removeNew').hide().on('click', function(e) {
        e.preventDefault();
        $(this).closest('.Template').remove();
    });
    $('a.showNew').on('click', function(e) {
        e.preventDefault();
        var clone = Template.clone(true, true).insertAfter("#place").find('.removeNew').show().end();

    });
})(jQuery);

这个增加但不隐藏删除按钮的那个

      $('#showNew').click(function() {
      var num = $('.template').length,
      newNum = new Number(num + 1),
      newElem = $('#Template' + num).clone(true, true).attr('id', 'Template' + newNum).appendTo('#place');
      newElem.find('.analysis').attr('id', 'ID' + newNum + '_analysis').attr('name', 'ID' + newNum + '_analysis').val();
      newElem.find('.preserve').attr('id', 'ID' + newNum + '_preserve').attr('name', 'ID' + newNum + '_preserve').val();
      newElem.find('.cool').attr('id', 'ID' + newNum + '_cool').attr('name', 'ID' + newNum + '_cool').val();
    $('#Template'+ num).after(newElem);
   });
 })

我想知道是否有某种方法可以将它们组合起来......

我也有问题，因为无论我似乎尝试原始div成为克隆，完成删除按钮，而原来的div应该可以改变。

Answer 1

我认为最简单的方法是隐藏模板的原始副本，并将所有克隆基于此。这个fiddle演示了这种方法。

(function ($) {
    var Template = $('#Template');
    var count = 0;
    var nextId = 0;

    Template.find('.removeNew').on('click', function (e) {
        e.preventDefault();
        $(this).closest('.template').remove();
        count--;
    });

    function cloneTemplate(removable) {
        var clone = Template.clone(true, true);
        clone.attr('id', clone.attr('id') + nextId);

        clone.find('label[for]').each(function( index ) {
            var elem = $(this);
            elem.attr('for', elem.attr('for') + nextId);
        });

        clone.find('select, input').each(function( index ) {
            var elem = $(this);
            elem.attr('id', elem.attr('id') + nextId);
            elem.attr('name', elem.attr('name') + nextId);
        });

        if (!removable) {
            clone.find('.removeNew').remove();
        }

        clone.insertBefore("#addNew").removeClass('hide');
        count++;
        nextId++;
    }

    // Create First Analyte and delete the remove button.
    cloneTemplate(false);

    $('a.showNew').on('click', function (e) {
        e.preventDefault();
        cloneTemplate(true);
        return false;
    });
})(jQuery);

在模板中放置Add New按钮是没有意义的，所以我把它移到了外面。在Add New按钮之前添加所有新克隆。

您应该在上面的脚本中注意到第一个元素是通过克隆Template创建的。然后在单击clone按钮时创建调用相同Add New函数的新元素。

~~注意：此解决方案不包括更新元素id或name属性。你几乎肯定想做的事情。~~

克隆div和递增

1 个答案: