forEach 循环跳过模态打开

Question

我有一个包含 n 个单词的数组。 我正在通过每个元素运行一个到 go 的 forEach 循环，对于每个元素，它应该打开一个带有文本输入的模态，单击一个按钮后，该值存储在一个新数组中，模态消失。 那么同样的事情应该发生 n 次。

我已经用 prompt 对它进行了测试，它运行良好。 我在控制台中记录循环中的值，似乎发生的是数组中的每个单词都被记录下来，然后模式只为最后一个实例打开。 不知道为什么

这是 for each 循环：

words.forEach(function(word) {

      console.log(word);

      $('.modal-title').html("Edit value for "+word);
      $('#wordModal').modal('show');

      $('#submit').click(function() {

        let input = $('#elm2').val();

        newBody = body.replaceAll("["+word+"]", input);
        body = newBody;

        $('#wordModal').modal('hide');
      })
    });

当模式出现时，标题显示“为（数组中的最后一个元素）输入值”

我的目标：

对于数组中的每个元素，我希望屏幕上出现一个弹出窗口来更改它的值。 为下一个元素加载另一个弹出窗口，依此类推。 到目前为止，提示工作正常但看起来不太好。

这是模式的代码：

<div class="modal fade" id="wordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit Value</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">

          <div class="form-group">
            <label>Comment</label>
            <textarea type="text" class="form-control" name="comment" id="elm2" placeholder=""></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" id="submit" class="btn btn-primary">Add</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

Answer 1

除了这可能不是最好的用户体验这一事实之外，使用模态执行此操作的方法是使用async / await将固有的异步操作变成感觉更同步的东西：

 function showModal(word){ return new Promise(resolve => { $('.modal-title').html("Edit value for "+word); $('#wordModal').modal('show').on("hidden.bs.modal", function(){ let input = $('#elm2').val(); resolve(input); }); }); } async function promptAllWords(words){ for(var i=0;i<words.length;i++){ var word = words[i]; var userResponse = await showModal(word); console.log("finished",word,"user typed:",userResponse); } } promptAllWords(["Hello","World","foo","bar"]);

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <div class="modal fade" id="wordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Edit Value</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> </div> <div class="modal-body"> <div class="form-group"> <label>Comment</label> <textarea type="text" class="form-control" name="comment" id="elm2" placeholder=""></textarea> </div> </div> <div class="modal-footer"> <button type="button" id="submit" class="btn btn-primary" data-dismiss="modal">Add</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>

正如您所评论的那样，您想从promptAllWords返回一些内容，但它返回 Promise，您只需要按原样对待它 - 一个异步调用。

 async function promptAllWords(words){ // fluff removed for brevity return "Test"; } promptAllWords().then(result => { console.log("return value=",result); });