Question

所以我已经设法通过使用javascript和jquery动态添加某个表单的行和子行。目前的布局如下图所示。

在HTML中，此部分的<div>如下所示：

<div class="controls">
   <form role="form" autocomplete="off">
      <div class="entry">
         <div class="col-sm-5">
            <input id="medication_name" name="names[]" type="text" class="form-control input-lg margin_top" placeholder="Name medication">
         </div>
         <div class="col-sm-6">
            <select id="medication_type" name="types[]" class="form-control input-lg margin_top">
               <option value="" disabled selected>Type</option>
               <option value="short" style="color:#FF8000">Shortworking insulin</option>
               <option value="long" style="color:#00B058">Longworing insulin</option>
               <option value="other" style="color:#64B5F6">Other</option>
            </select>
         </div>
         <div class="col-sm-1">
            <button class="btn btn-success btn-add input-lg margin_top" type="button">
            <span class="glyphicon glyphicon-plus"></span>
            </button>
         </div>
         <!-- SUB ENTRY START -->
         <div class="subentry">
            <div class="col-sm-3">
               <input id="time_amount" name="amount[]" type="text" class="form-control input margin_top" placeholder="Amount">
            </div>
            <div class="col-sm-8">
               <select id="time_type" name="times[]" class="form-control input margin_top">
                  <option value="" disabled selected>Time of day</option>
                  <option value="morning">in the morning</option>
                  <option value="noon" >at noon</option>
                  <option value="evening">in the evening</option>
                  <option value="food">with food</option>
                  <option value="bed">before bed</option>
               </select>
            </div>
            <div class="col-sm-1">
               <button class="btn btn-info btn-add-time input margin_top" type="button">
               <span class="glyphicon glyphicon-plus"></span>
               </button>
            </div>
         </div>
         <!-- SUB ENTRY END -->
      </div>
   </form>
</div>

在我的脚本中，当按下+按钮时克隆某些html片段，然后按 - 按钮将其删除。使用数组保存不同输入和选择的名称。例如，在上面的html代码中，我们找到了name="names[]"。该脚本可以在下面找到：

$(function() {
    $(document).on('click', '.btn-add', function(e) {
        e.preventDefault();

        var controlForm = $('.controls form:first'),
            currentEntry = $(this).parents('.entry:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('.entry:not(:last) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('btn-success').addClass('btn-danger')
            .html('<span class="glyphicon glyphicon-minus"></span>');

    }).on('click', '.btn-remove', function(e) {
        $(this).parents('.entry:first').remove();

        e.preventDefault();
        return false;
    });

    $(document).on('click', '.btn-add-time', function(e) {
        e.preventDefault();

        var controlForm = $(this).parents('.entry:first'),
            currentEntry = $(this).parents('.subentry:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('.subentry:not(:last) .btn-add-time')
            .removeClass('btn-add-time').addClass('btn-remove-time')
            .removeClass('btn-info').addClass('btn-warning')
            .html('<span class="glyphicon glyphicon-minus"></span>');

    }).on('click', '.btn-remove-time', function(e) {
        $(this).parents('.subentry:first').remove();

        e.preventDefault();
        return false;
    });
});

因此，您可以看到我克隆了包含新药物或新药时间形式元素的<div> s。现在来看我的实际问题。我知道我可以通过使用例如：

循环遍历名称数组（name =“names []”）

$('input[name^="names"]').each(function() {
    console.log(!$(this).val());
});

这可以对我的所有数组完成：names []，types []，amount []，types []。但我的问题是，就像我之前所说的那样，我不知道哪个时间用于哪种药物，因为它们没有以某种方式耦合，它们只是添加到阵列中。因此，如果我循环使用amount []和times []数组，我不知道哪个时间用于哪种药物。也许你们中的一个人知道一个解决方案或知道如何编辑代码，这样就可以了吗？非常感谢提前。

如何在使用克隆时保持动态添加的子元素唯一？

0 个答案: