jQuery-变量未更新到另一个变量

Question

首先，我不是任何类型的程序员，所以我需要您解决我的问题。

我有一个触点表格，该表格在一个地方可以添加更多输入字段，直到最多10。 我添加的每个字段都在代码中具有我称为“ PERS”的类，并且我希望此类PERS在附近的增量数字，如pers1、2、3，然后继续进行。

获得增量值很容易，但问题是“ PERS”类不会更新变量，使文档负载的第一个数字保持。

这是代码，

<script type="text/javascript">
  window.s = 1;
</script>

<script type="text/javascript">
  $(document).ready(function() {
    var addButton = $('.add_button');
    var wrapper = $('.field_wrapper');
    var maxField = 10;
    var fieldHTML = '<div style="margin-top:5px;"><input type="text3" name="pers' + window.s + '" placeholder="Nome e Cognome"/><input type="time" style=margin-left:3.5px; autocomplete="off"><input type="time" style=margin-left:3.5px; autocomplete="off"><a href="javascript:void(0);"class="remove_button" title="Rimuovi"><img src="IMG/less_icon.png"></a></div>';

    $(addButton).click(function() {
      if (window.s < maxField) {
        window.s++; //Increment field counter
        $(wrapper).append(fieldHTML); //Add field html
      }
    });

    $(wrapper).on('click', '.remove_button', function(e) {
      e.preventDefault();
      $(this).parent('div').remove(); //Remove field html
      s--; //Decrement field counter
    });
  });
</script>

有一个全局变量“ window.s”，因为这是我最后一次尝试更新var。

这些字段正确地添加到应有的时间为10，但是“窗口”或仅在“ s”时仍然保持其第一个值1的值，因此“ pers”始终是“ pers1”。我认为暴露全局变量，我会解决这个问题，但什么也没有。

我在做什么错？

非常感谢您的帮助。

Answer 1

代码的问题是，当页面加载时，您仅设置fieldhtml一次。此时，window.s是1，因此这是每次参考fieldhtml时使用的值。快速解决的方法是将fieldHtml定义放置在consic> click（）事件处理程序中。

但是，更好的方法是完全消除对增量变量的需求。在您动态生成的所有字段上使用相同的名称。这样，您就不需要维护计数（例如，如果添加了5个，并且有人删除了第三个，那么您当前最终会获得2 per5元素）。因此，它也简化了JS逻辑。此外，您应该将HTML放在A ＆lt; template＆gt;元素中，而不是JS中，以免代码库的交叉污染。

这是我提到的变化的一个工作示例：

jQuery($ => {
  var $addButton = $('.add_button');
  var $wrapper = $('.field_wrapper');
  var maxFields = 10;
  var fieldHTML = $('#field_template').html();

  $addButton.click(() => {
    if ($('.field_wrapper > div').length < maxFields) {
      $wrapper.append(fieldHTML);
    }
  });

  $wrapper.on('click', '.remove_button', e => {
    e.preventDefault();
    $(e.target).closest('div').remove();
  });
});

.field_wrapper>div {
  margin-top: 5px;
}

.field_wrapper input.time {
  margin-left: 3.5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button class="add_button">Add</button>
<div class="field_wrapper"></div>

<template id="field_template">
  <div>
    <input type="text3" name="pers[]" placeholder="Nome e Cognome" />
    <input type="time" name="time1[]" class="time" autocomplete="off" />
    <input type="time" name="time2[]" class="time" autocomplete="off" />
    <a href="#" class="remove_button" title="Rimuovi">
      <img src="IMG/less_icon.png">
    </a>
  </div>
</template>

然后，您可以将所有input值接收为PHP代码中的数组像这样的phs-in-php“> 。

Answer 2

这是因为您没有在那里使用更新的值。

首先，您将一个值分配给window.s，然后创建一个使用window.s的变量，从初始状态中，并且在每个添加的情况下，只需附加相同的fieldhtml。因此，您获得了相同的价值。

这是答案，您正在寻找：

<div><button class="add_button">click me</button></div>
<div class="field_wrapper"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
  window.s = 1;
</script>

<script type="text/javascript">
  $(document).ready(function() {
    var addButton = $('.add_button');
    var wrapper = $('.field_wrapper');
    var maxField = 10;


    $(addButton).click(function() {
      if (window.s < maxField) {
        window.s++; //Increment field counter
        let fieldHTML = generateLine(window.s);
        $(wrapper).append(fieldHTML); //Add field html
      }
    });

    $(wrapper).on('click', '.remove_button', function(e) {
      e.preventDefault();
      $(this).parent('div').remove(); //Remove field html
      s--; //Decrement field counter
    });
  });
  
  function generateLine(lineNumber){
      return '<div style="margin-top:5px;"><input type="text3" name="pers' + lineNumber + '" placeholder="Nome e Cognome"/><input type="time" style=margin-left:3.5px; autocomplete="off"><input type="time" style=margin-left:3.5px; autocomplete="off"><a href="javascript:void(0);"class="remove_button" title="Rimuovi"><img src="IMG/less_icon.png"></a></div>';
  }
</script>