从数组大小创建输入不适用于Jquery

时间:2019-01-17 19:53:07

标签: javascript jquery html twitter-bootstrap-3

我正在尝试从n中的array中填充localStorage输入的列表。问题是我可以在console.log()中看到for正在执行,但是我只看到两个输入。

javascript:

App.prefillWords = function() {
    var arrayWords = JSON.parse(localStorage.getItem("event-data")).selected_word;

    for (var i = 0; i < arrayWords.length; i++) {
        var addto = "#field" + i;
        var addRemove = "#field" + (i);
        console.log(addto);
        console.log(addRemove);

        var newIn = '<input placeholder="Word" class="input form-control wordData" id="field' + i + '" name="field' + i + '" type="text">';
        var newInput = $(newIn);
        var removeBtn = '<button id="remove' + (i - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
        var removeButton = $(removeBtn);
        $(addto).after(newInput);
        $(addRemove).after(removeButton);

        $("#field" + i).attr('data-source', $(addto).attr('data-source'));
        $("#count").val(i);

        $('.remove-me').click(function (e) {
            e.preventDefault();
            var fieldNum = this.id.charAt(this.id.length - 1);
            var fieldID = "#field" + fieldNum;
            $(this).remove();
            $(fieldID).remove();
        });
    }

}

html

    <div class="panel-body">
        <input type="hidden" name="count" value="1" />
            <form class="wordsForm">
                <div id="field" class="form-group row">
                    <label class="col-12 col-sm-3 col-form-label text-sm-right" for="wordScore">New Word</label>
                    <div class="col-12 col-sm-8 col-lg-6" id="fill">
                        <input autocomplete="off" class="wordData form-control" id="field1" name="prof1" type="text" placeholder="Word"/>
                        <button id="b1" class="btn add-more" type="button">+</button>
                     </div>
            </div>
            <div class="col-sm-6">
               <p class="text-right">
                  <button class="btn btn-space btn-primary" id="updateEvent">Submit</button>
                  <button class="btn btn-space btn-secondary" id="cancelEvent">Cancel</button>
               </p>
             </div>
          </form>
  </div>

界面:

enter image description here

任何建议都非常感谢,谢谢

0 个答案:

没有答案