javascript - DOM 表单元素未在 for 循环内更新？

Question

我调用此函数来更新我的表单元素:

function fillInEditEventForm(json){
  var $editForm = $(".edit-event-form .form-content");  
  for(var i = 0, len = json['fields'].length; i < len; i++){
    var field = json['fields'][i];
    var value = json[field];
    if(value){
      if(field === "file_name'"){
        $editForm.find("label span").text(value);
      }else{
        var selector = `input[name='${value}']`;
        $editForm.find(selector).val(value);
      }
      console.log(`Modified field ${field} with ${value}`);
    }
  }
}

但是，我的 DOM 元素从未使用新的 val() 或 text() 进行更新

我知道我的 for 循环正在运行，控制台打印:

Modified field title with Selling plants
Modified field start_date with 5/5/17
Modified field start_time with 10:00am
Modified field end_date with 5/5/17
Modified field end_time with 11:00am
Modified field place with PSB
Modified field description with Come buy plants today!
Modified field file_name with peperomiaCaperata.jpg

但奇怪的是，在 for 循环之外执行此操作会更新我的 DOM 元素:

var $editForm = $(".edit-event-form .form-content");      
$(".edit-event-form").find("label span").text("worker worimk");
$editForm.find("input[name='title']").val("omg why won't u work");

所以我不明白为什么我不能只在 for 循环中更新 DOM 元素。

如有任何帮助，我们将不胜感激!

代码

edit-event-form.php 是我尝试更新的表单:

<div class="edit-event-form form-screen pop-up">
      <button class="close-pop-up"><span class="icon-x"></span></button>
      <form name="edit-event-form" method="post" enctype="multipart/form-data">
          <h1>Edit Event</h1>
          <div class="form-content">
            <div class="box">
              <input type="file" id="file" name="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />
              <label for="file">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                  <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
                </svg>
                <span>Choose a file...</span>
                <button class="delete-files"><span class="icon-x-bold"></span></button>
              </label>
            </div>
            <input type="text" name="title" placeholder="Title*" required>
            <input type="text" name="start_date" class="date" placeholder="Start Date*" required>
            <input type="text" name="start_time" class="timepicker" placeholder="Start Time*" required>
            <h1 class="time-label">to</h1>
            <input type="text" name="end_date" class="date" placeholder="End Date">
            <input type="text" name="end_time" class="timepicker" placeholder="End Time">
            <input type="text" name="place" placeholder="Place">
            <input type="text" name="description" placeholder="Description">
          </div>
          <button type="submit" class="submit" name="submit" value="submit">Save</button>
      </form>
    </div>

Answer 1

我至少发现了一件事:

var selector = `input[name='${value}']`;

它是 ${value} 而不是 ${field}，我想这就是它无法正确找到输入的原因。