Question

我有以下html输入的

<form id="test" role="form">
    <input class="form-control" data-day="monday" type="time" name="open" value="12:00">
    <input class="form-control" data-day="monday" type="time" name="close" value="20:00">
    <!-- Rest of the weekdays -->
    <input class="form-control" data-day="sunday" type="time" name="open" value="12:00">
    <input class="form-control" data-day="sunday" type="time" name="close" value="23:00">
</form>

<pre id="output"></pre>

我尝试根据输入 （更改时） 生成JSON字符串。我的代码的问题在于，当我更改星期天时，它将（仅）更新其他日期的值。

如果我在前一天进行了任何更改，那么什么也没发生，我有点明白为什么它失败了，但是现在我为此付出了很多努力。

function toJSONString(form) {

  var daysObj = {}
  var hoursObj = {};
  var elements = form.querySelectorAll("input[type='time']");
  for (var i = 0; i < elements.length; ++i) {
    var element = elements[i];
    var days = element.dataset.day;
    var name = element.name;
    var value = element.value;

    //if (days) {
    //if (name) {
    hoursObj[name] = value;
    //}
    daysObj[days] = hoursObj;
    //}
  }

  return JSON.stringify(daysObj, null, 2);
}
document.addEventListener("DOMContentLoaded", function() {
  var form = document.getElementById("test");
  var output = document.getElementById("output");
  form.addEventListener("change", function(e) {
    e.preventDefault();
    var json = toJSONString(this);
    output.innerHTML = json;

  }, false);

});

<form id="test" role="form">
  <input class="form-control" data-day="monday" type="time" name="open" value="12:00">
  <input class="form-control" data-day="monday" type="time" name="close" value="20:00">
  <!-- Rest of the weekdays -->
  <input class="form-control" data-day="sunday" type="time" name="open" value="12:00">
  <input class="form-control" data-day="sunday" type="time" name="close" value="23:00">
</form>

<pre id="output"></pre>

Answer 1

使用input事件代替change，因为change事件仅在输入失去焦点之后发生。每次输入值更改都会触发input个事件

form.addEventListener("input",function(){})

您每天还使用相同的小时对象。因此，每次迭代都只是更改同一对象的open和close属性。

您需要为hoursObj创建当天的最后一个属性，然后设置close

for (var i = 0; i < elements.length; ++i) {
  //previous code
  //...

  if(name=="close"){
     hoursObj = {};
  }
}

演示

function toJSONString(form) {
  var daysObj = {}
  var hoursObj = {}
  var elements = form.querySelectorAll("input[type='time']");
  for (var i = 0; i < elements.length; ++i) {
    var element = elements[i];
    var days = element.dataset.day;
    var name = element.name;
    var value = element.value;
    hoursObj[name] = value;
    daysObj[days] = hoursObj;
    if(name=="close"){
      hoursObj = {};
    }
  }

  return JSON.stringify(daysObj);
}
document.addEventListener("DOMContentLoaded", function() {
  var form = document.getElementById("test");
  var output = document.getElementById("output");
  form.addEventListener("input", function(e) {
    e.preventDefault();
    var json = toJSONString(this);
    output.innerHTML = json;

  }, false);

});

<form id="test" role="form">
  <input class="form-control" data-day="monday" type="time" name="open" value="12:00">
  <input class="form-control" data-day="monday" type="time" name="close" value="20:00">
  <!-- Rest of the weekdays -->
  <input class="form-control" data-day="sunday" type="time" name="open" value="12:00">
  <input class="form-control" data-day="sunday" type="time" name="close" value="23:00">
</form>

<pre><code id="output"></code></pre>

更改时从表单生成JSON字符串以填充营业时间

1 个答案: