Mit jQuery: Array-Indexwert zur Ausgabe hinzufügen

Question

Ich bin neu in jQuery und JavaScript.

Es ist gelungen, den folgenden Code zum Laufen zu bringen, indem ein neues Texteingabefeld basierend auf der vom Benutzer aus dem (vorherigen) Dropdown-Auswahlfeld ausgewählten Zahl hinzugefügt wurde.

<script>
$(function() {

  var input = $('<input placeholder="输入名称或标题..." type="text" required/>');
  var newFields = $('');

  $('#qty').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n + 1) {
      if (n > newFields.length) {
        addFields(n);
      } else {
        removeFields(n);
      }
    }
  });

  function addFields(n) {
    for (i = newFields.length; i < n; i++) {
      var newInput = input.clone();
      newFields = newFields.add(newInput);
      newInput.appendTo('#newFields');
    }
  }

  function removeFields(n) {
    var removeField = newFields.slice(n).remove();
    newFields = newFields.not(removeField);
  }
});
</script>

Allerdings möchte ich in <input placeholder="输入主题或标题..." type="text" required/> zwei Eigenschaften/Parameter für jedes hinzugefügte Feld hinzufügen:

1. Das erste ist name="subject1", name="subject2"und so weiter für jedes Eingabefeld

Zum Beispiel sollte die Ausgabe-Eingabebezeichnung für das erste Feld <input placeholder="输入主题或标题..." type="text" name="subject1" required/>

lauten

2. Der zweite ist der Feldtitel („Betreff 1“, „Betreff 2“ usw.) direkt vor dem <input>-Tag Beispielsweise sollte die Ausgabe-Eingabebezeichnung für das erste Feld „Subject 1: <input placeholder="输入主题或标题..." type="text" name="subject1" required/>“
lauten

Wie implementiert man diese Funktion?

Answer 1

这是一种添加主题标题和名称属性的方法。

您可以使用字符串连接来实现，使用变量i。

$(function() {
  $('#qty').bind('blur keyup change', function() {
    var n = this.value || 0;
    createFields(n)
  });

  function createFields(n) {
    $("#newFields").empty(); //清空字段列表

    for (var i = 1; i <= n; i++) {
      var fieldWrapper = $('<div class="fieldwrapper"/>'); //创建包装器
      var name = $("<p>主题 " + i + "</p>"); //创建主题标题
      var input = $('<input name="Subject' + i + '" placeholder="输入名称或标题..." type="text" required />'); //创建输入框

      fieldWrapper.append(name); //添加标题
      fieldWrapper.append(input); //添加输入框
      $("#newFields").append(fieldWrapper); //添加到列表中
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="qty" type="number" />
<div id="newFields">

</div>