javascript - 如何限制输入的数量并为每个输入创建唯一的 ID？

Question

我有这个代码:

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $('#addScnt').live('click', function() {
    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
  });

  $('#remScnt').live('click', function() {
    if (i > 2) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});

input {
  padding: 5px;
  border: 3px solid #999;
  border-radius: 8px;
  margin-bottom: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<button id="addScnt" style='margin-bottom: 15px;'>Add (limit 5)</button>

<div id="p_scents">
  <p>
    <label for="p_scnts"><input type="text" id="p_scnt" class="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
  </p>
</div>

我想将新输入的创建限制为 5 个，并在生成每个输入时为每个输入创建一个唯一的 ID，例如:

#myid1
#myid2
#myid3
#myid4
#myid5

这只是一个可重现的示例，我的实际案例需要更多字段。

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function() {
        if (i <= 4) { // 5 inputs limit
            $('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i + '" class="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
        }
        return false;
    });

    $(document).on('click', '.remScnt', function() { 
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
}); 

但除此之外没有任何作用。如何限制创建的条目数量并为每个条目分配唯一的 id？

Answer 1

jQuery.size() 已在 3.0 版中删除。它已被 jQuery.length 取代。我更改了代码的第三行，现在它可以工作了，如下所示:

$(function() {
 let scntDiv = $('#p_scents');
 let id=0, i = $('#p_scents p').length + 1;

$('#addScnt').on('click', function() {
    if (i <= 4) { // Limita a 5 campos
        $('<p><label for="p_scnts"><input type="text" id="p_scnt_' + (++id) + '" class="p_scnt" size="20" name="p_scnt_' + id +'" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
    }
    return false;
});

$(document).on('click', '.remScnt', function() { 
    if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }
    return false;
});
});

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<button id="addScnt">add scent</button>
<div id="p_scents">
</div>

我修复了可能重复 id 的明显错误。这只是一个快速修复，但它将保证唯一的 ID。