保存在本地存储中的“未定义,未定义”

z6psavjg  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(446)

我正在制作一个day planner应用程序,时间段为0900-1700,输入可以保存到本地存储中,然后在页面刷新时自动检索。当前我的代码有问题,只在控制台中保存“undefined,undefined”,在页面刷新时不返回任何内容。感谢您的帮助。谢谢
html:

<tr class="row" id="15">
            <th scope="time" id="hour15" class="time">15:00</th>
            <td><input type="text" class= "hourinput"/></td>
            <td class="btnContainer">
              <button class="saveBtn"><i class="fas fa-save"></i></button>
            </td>
          </tr>
          <tr class="row" id="16">
            <th scope="time" id="hour16" class="time">16:00</th>
            <td><input type="text" class= "hourinput"/></td>
            <td class="btnContainer">
              <button class="saveBtn"><i class="fas fa-save"></i></button>
            </td>
          </tr>

js:

// Moment.js to auto-update time on webpage------------------------------------------//
var update = function () {
    date = moment(new Date());
    currentDay.html(date.format('dddd, MMMM Do YYYY, HH:mm:ss a'));
};

$(document).ready(function(){
    currentDay = $('#currentDay');
    update();
    setInterval(update, 1000);
});
// Add input to local storage-------------------------------------------------------//

$('.saveBtn').on('click', function () {
    // Get the values
    var hourinput = $(this).siblings('.hourinput').val();
    var hour = $(this).parent().attr('id');

    // Save data in local storage
    localStorage.setItem(hour, hourinput);
});

  $('#9 .hourinput').val(localStorage.getItem('9'));
  $('#10 .hourinput').val(localStorage.getItem('10'));
  $('#11 .hourinput').val(localStorage.getItem('11'));
  $('#12 .hourinput').val(localStorage.getItem('12'));
  $('#13 .hourinput').val(localStorage.getItem('13'));
  $('#14 .hourinput').val(localStorage.getItem('14'));
  $('#15 .hourinput').val(localStorage.getItem('15'));
  $('#16 .hourinput').val(localStorage.getItem('16'));
  $('#17 .hourinput').val(localStorage.getItem('17'));
egdjgwm8

egdjgwm81#

你的 .saveBtn 元素没有兄弟元素。你需要横穿到 .row 然后在中找到元素/值。
例如

$(".saveBtn").on("click", function () {
  const row = $(this).closest(".row") // see https://api.jquery.com/closest/

  // Get the values
  const hourinput = row.find(".hourinput").val();
  const hour = row.attr('id');

  // Save data in local storage
  localStorage.setItem(hour, hourinput);
});

仅供参考,通过在容器级别侦听,您的单击事件处理程序可能会更高效(例如 <table> )

$("table#hours").on("click", ".row[id] .saveBtn", function() {
  // etc
})

你也应该做你的纽扣 type="button" 以确保他们不会意外提交任何表格。

相关问题