使用jQuery: 在輸出中加入陣列索引值
P粉567112391
P粉567112391 2023-09-16 09:54:22
0
1
752

我是jQuery和JavaScript的新手。

設法使以下程式碼工作,根據使用者從(先前的)下拉選擇欄位中選擇的編號添加新的文字輸入欄位。

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

然而,在<input placeholder="輸入主題或標題..." type="text" required/>中,我想為每個添加的字段添加兩個屬性/參數:

  1. 第一個是name="subject1", name="subject2"等等,對於每個輸入欄位

例如,第一個欄位的輸出輸入標籤應為<input placeholder="輸入主題或標題..." type="text" name="subject1" required/>

  1. #第二個是字段標題(“Subject 1”,“Subject 2”等),就在<input>標籤之前 例如,第一個欄位的輸出輸入標籤應為「Subject 1: <input placeholder="輸入主題或標題..." type="text" name="subject1" required/>

請問如何實現這個功能?

P粉567112391
P粉567112391

全部回覆(1)
P粉262113569

這是一種新增主題標題和名稱屬性的方法。

您可以使用字串連接來實現,使用變數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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!