我正在制作一个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'));
1条答案
按热度按时间egdjgwm81#
你的
.saveBtn
元素没有兄弟元素。你需要横穿到.row
然后在中找到元素/值。例如
仅供参考,通过在容器级别侦听,您的单击事件处理程序可能会更高效(例如
<table>
)你也应该做你的纽扣
type="button"
以确保他们不会意外提交任何表格。