Menggunakan jQuery: Tambahkan nilai indeks tatasusunan pada output

Question

Saya baru menggunakan jQuery dan JavaScript.

Berurusan untuk memastikan kod berikut berfungsi, menambah medan input teks baharu berdasarkan nombor yang dipilih oleh pengguna daripada medan pilihan lungsur turun (sebelumnya).

<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>

Walau bagaimanapun, dalam <input placeholder="输入主题或标题..." type="text" required/> saya ingin menambah dua sifat/parameter untuk setiap medan yang ditambahkan:

1. Yang pertama ialah name="subject1", name="subject2"dan seterusnya, untuk setiap medan input

Sebagai contoh, label input output untuk medan pertama hendaklah <input placeholder="输入主题或标题..." type="text" name="subject1" required/>

2. Yang kedua ialah tajuk medan ("Subjek 1", "Subjek 2", dll.), sejurus sebelum teg <input> Contohnya, label input output untuk medan pertama hendaklah "Subject 1: <input placeholder="输入主题或标题..." type="text" name="subject1" required/>"

Bagaimana untuk melaksanakan fungsi ini?

Answer 1

Ini ialah cara untuk menambah tajuk tema dan atribut nama.

Anda boleh melakukan ini menggunakan penggabungan rentetan, menggunakan pembolehubahi.

$(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>