forEach 循环跳过模态打开

Question

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

我已经在提示下对其进行了测试，并且效果很好。我在控制台记录循环中的值，似乎正在发生的是数组中的每个单词都被记录下来，然后模式只为最后一个实例打开。不知道为什么

这里是 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

除了这可能不是最好的 UX 之外，使用 modals 执行此操作的方法是使用 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);
});