如何使用jQuery循环变量从2开始，同时保持字段删除选项？-解网

问：

我发现这个片段可以向表单添加其他字段。效果很好。如果可以，请告诉我如何让添加的字段从 2 开始，同时保留删除它的选项。虽然 i = 2 确实有效，但我还没有弄清楚相应地添加/删除所述字段的选项需要什么。感谢您抽出宝贵时间接受采访。

$(document).ready(function() {
  var i = 1;
  $('#add').click(function() {
    if (i <= 7) {
      $('#dynamic_field').append('<div class="add-row" id="row' + i + '"><label" for="number_' + i + '">Number ' + i + '</label><input type="text" name="number_' + i + '" value=""></div>')
      i++;
      $('.btn-remove').removeClass('hidden');
    }
  });
  $(document).on('click', '.btn-remove', function() {
    var button_id = $(this).attr("id");
    i--;
    $('#row' + $('#dynamic_field div').length).remove();
    if (i<=1) {
      $('.btn-remove').addClass('hidden');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add" class="btn-add">Add Another Number</button>   <button type="button" class="btn-remove hidden">Remove last</button>
<div id="dynamic_field"></div>

JavaScript jQuery 循环变量递增

“从 2 点开始”是什么意思？你的意思是第一个标签应该是？别的东西？顺便说一句，给元素一个具有递增数字的 id 不是很有用。如果需要按编号访问元素，只需获取这些元素的集合并按索引选择（或使用 CSS 选择器）。不需要带有数字的属性。Number 2id

0赞 Bill 9/1/2022

感谢您如此快速的回复。可见字段可以解释为字段 1，后面的“添加”字段从 2 开始，然后是 3、4......等。将增量动态添加到字段名称中后，我可以单独输出每个变量。

0赞 trincot 9/1/2022

“可见场”：所以你希望第一个场始终存在，而不是可移动的？

0赞 Bill 9/1/2022

从技术上讲，如果数字“1”未显示在“默认”字段中，则可以工作。再次感谢！

答：

0赞 mplungjan 9/1/2022 #1

你不需要自己计数

$(function() {
  const $container = $("#dynamic_field");
  let count = $container.children().length;
  $('.btn-remove').toggle(count > 1);

  $('#add').click(function() {
    let count = $container.children().length;
    if (count < 7) {
      $('#dynamic_field').append(`<div class="add-row" id="row$(count)"><label" for="number_${count}">Number ${count+1}</label><input type="text" name="number_${count}" value=""></div>`);
      count++;
    }
    $('.btn-remove').toggle(count > 0);
  });
  $(document).on('click', '.btn-remove', function() {
    const $children = $container.children();
    $children.last().remove();
    let count = $children.length;
    console.log(count)
    $(this).toggle(count > 1);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add" class="btn-add">Add Another Number</button> <button type="button" class="btn-remove hidden">Remove last</button>

<div id="dynamic_field"></div>

此外，您可以克隆现有行

$(function() {
  const $container = $("#dynamic_field");
  const getCount = () => $container.find(".add-row").length;  
  $('.btn-remove').toggle(getCount() > 1);

  $('#add').click(function() {
    let count = getCount();
    if (count < 7) {
      const $cloneDiv =  $container.children().first().clone().appendTo($container);
      $cloneDiv.find("input").val("").attr("name",`number${count+1}`);
      $cloneDiv.find("label").text(`Number ${count+1}`);
    }
    $('.btn-remove').toggle(count > 0);
  });
  $(document).on('click', '.btn-remove', function() {
    $container.find(".add-row").last().remove();
    let count = getCount()
    console.log(count)
    $(this).toggle(count > 1);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add" class="btn-add">Add Another Number</button> <button type="button" class="btn-remove hidden">Remove last</button>

<div id="dynamic_field">
  <div class="add-row" id="1">
    <label for="number_1">Number 1</label><input type="text " name="number_1 " value="" />
  </div>
</div>

jQuery($ => {
  let maxRows = 7;
  let rowTemplate = $('#row-template').html();
  let $container = $('#dynamic_field');

  $('#add').on('click', () => {
    let rowCount = $('.row').length;
    if (rowCount >= maxRows)
      return;
      
    let $row = $(rowTemplate).appendTo($container);
    $row.find('span').text(rowCount += 2);
    $('.btn-remove').removeClass('hidden');
  });
  
  $(document).on('click', '.btn-remove', () => $('.row:last').remove());
});

.hidden { 
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add" class="btn-add">Add Another Number</button> 
<button type="button" class="btn-remove hidden">Remove last</button>
<div id="dynamic_field"></div>

<template id="row-template">
  <div class="row">
    <label>
      Number <span></span>
      <input type="text" name="number[]" value="" />
    </label>
  </div>
</template>

如何使用jQuery循环变量从2开始，同时保持字段删除选项？

How can I use jQuery loop variable to start at 2 while maintaining field removal option?

评论

评论

评论