控制台日志显示 NaN 和颜色函数未正确设置类

Question

控制台日志显示我放入的任何var的NaN。此外，颜色函数没有正确更改类，可能是因为数字问题。仍然需要计算本地存储，但我主要关心的是让var显示一个应该显示的数字，并让类根据一天中的时间进行更改。

var time9 = (parseInt($('#9').children('div').attr('data-value')));
var time10 = (parseInt($('#10').children('div').attr('data-value')));
var time11 = (parseInt($('#11').children('div').attr('data-value')));
var time12 = (parseInt($('#12').children('div').attr('data-value')));
var time13 = (parseInt($('#13').children('div').attr('data-value')));
var time14 = (parseInt($('#14').children('div').attr('data-value')));
var time15 = (parseInt($('#15').children('div').attr('data-value')));
var time16 = (parseInt($('#16').children('div').attr('data-value')));
var time17 = (parseInt($('#17').children('div').attr('data-value')));
// Keeps date on the page
var date = moment().format("dddd, MMMM Do YYYY");
$("#currentDay").html(date);
//var time = $('.row').children('section'); //loop through this
console.log(time10);
// Event listender for saving activities in timeslots to local storage
$('.saveBtn').on('click', function () {
var activities = $('.acts').val();

localStorage.setItem(activities, time9);
localStorage.setItem(activities, time10);
localStorage.setItem(activities, time11);
localStorage.setItem(activities, time12);
localStorage.setItem(activities, time13);
localStorage.setItem(activities, time14);
localStorage.setItem(activities, time15);
localStorage.setItem(activities, time16);
localStorage.setItem(activities, time17);
});
// Changes color of timeslot container depending on time
function color() {
var currentTime = moment().hour(); // variable to pull current time from
// 9am timeslot
if (time9 > currentTime) {
$('.acts').addClass('future')
}
else if (time9 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 10am timeslot
if (time10 > currentTime) {
$('.acts').addClass('future')
}
else if (time10 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 11am timeslot
if (time11 > currentTime) {
$('.acts').addClass('future')
}
else if (time11 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 12pm timeslot
if (time12 > currentTime) {
$('.acts').addClass('future')
}
else if (time12 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 1pm timeslot
if (time13 > currentTime) {
$('.acts').addClass('future')
}
else if (time13 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 2pm timeslot
if (time14 > currentTime) {
$('.acts').addClass('future')
}
else if (time14 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 3pm timeslot
if (time15 > currentTime) {
$('.acts').addClass('future')
}
else if (time15 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 4pm timeslot
if (time16 > currentTime) {
$('.acts').addClass('future')
}
else if (time16 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 5pm timeslot
if (time17 > currentTime) {
$('.acts').addClass('future')
}
else if (time17 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}

};

.timeslots {
text-align: center;
border-radius: 15px;
}
.row {
white-space: pre-wrap;
height: 80px;
border-top: 1px solid white;
}
.hour {
background-color: #ffffff;
color: #000000;
border-top: 1px dashed #000000;
}
.past {
background-color: #d3d3d3;
color: white;
}
.present {
background-color: #ff6961;
color: white;
}
.future {
background-color: #77dd77;
color: white;
}
.saveBtn {
border: 1px solid black;
/*border-top-right-radius: 15px;
border-bottom-right-radius: 15px;*/
border-radius: 15px;
background-color: #06aed5;
color: white;
}
.saveBtn i:hover {
font-size: 20px;
transition: all 0.3s ease-in-out;
}
.timeslots {
display: flex;
justify-content: center;
font-size: 24px;
}

<div class="container-fluid">
<div class="row">
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="9" data-value="9">9:00am</div>
<textarea class="col-8 border border-info acts" style="resize: none;"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="10" data-value="10">10:00am</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="11" data-value="11">11:00am</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="12" data-value="12">12:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="13" data-value="13">1:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="14" data-value="14">2:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="15" data-value="15">3:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="16" data-value="16">4:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="17" data-value="17">5:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
</div>
<!-- Timeblocks go here -->
</div>

Answer 1

用.data('value')替换.children('div').attr('data-value')，它将适用于

var time9 = (parseInt($('#9').data('value')));
var time10 = (parseInt($('#10').data('value')));
var time11 = (parseInt($('#11').data('value')));
var time12 = (parseInt($('#12').data('value')));
var time13 = (parseInt($('#13').data('value')));
var time14 = (parseInt($('#14').data('value')));
var time15 = (parseInt($('#15').data('value')));
var time16 = (parseInt($('#16').data('value')));
var time17 = (parseInt($('#17').data('value')));

数据属性存在于所选元素中，中没有子div

Answer 2

您不应该调用$('#10').children('div')，因为#10没有子级：

<div class="col-2 timeslots hour" id="10" data-value="10">10:00am</div>

相反，要获得#10的data-value，请调用$('#10').attr('data-value')，例如：

var time10 = parseInt($('#10').children('div').attr('data-value'));

这同样适用于time9到time17。

至于本地存储，我添加了保存和检索<textarea>值的代码。

var time9 = (parseInt($('#9').attr('data-value')));
var time10 = (parseInt($('#10').attr('data-value')));
var time11 = (parseInt($('#11').attr('data-value')));
var time12 = (parseInt($('#12').attr('data-value')));
var time13 = (parseInt($('#13').attr('data-value')));
var time14 = (parseInt($('#14').attr('data-value')));
var time15 = (parseInt($('#15').attr('data-value')));
var time16 = (parseInt($('#16').attr('data-value')));
var time17 = (parseInt($('#17').attr('data-value')));
// Keeps date on the page
var date = moment().format("dddd, MMMM Do YYYY");
$("#currentDay").html(date);
//var time = $('.row').children('section'); //loop through this
console.log(time10);
// Event listender for saving activities in timeslots to local storage
$('.saveBtn').on('click', function () {
var activities = $('.acts').val();
// Save in local storage:
for (let i = 9; i <= 17; i++) {
localStorage.setItem(`item${i}`, $(`#${i}`).next('textarea').val())
}

});
// Changes color of timeslot container depending on time
function color() {
var currentTime = moment().hour(); // variable to pull current time from
// 9am timeslot
if (time9 > currentTime) {
$('.acts').addClass('future')
}
else if (time9 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 10am timeslot
if (time10 > currentTime) {
$('.acts').addClass('future')
}
else if (time10 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 11am timeslot
if (time11 > currentTime) {
$('.acts').addClass('future')
}
else if (time11 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 12pm timeslot
if (time12 > currentTime) {
$('.acts').addClass('future')
}
else if (time12 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 1pm timeslot
if (time13 > currentTime) {
$('.acts').addClass('future')
}
else if (time13 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 2pm timeslot
if (time14 > currentTime) {
$('.acts').addClass('future')
}
else if (time14 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 3pm timeslot
if (time15 > currentTime) {
$('.acts').addClass('future')
}
else if (time15 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 4pm timeslot
if (time16 > currentTime) {
$('.acts').addClass('future')
}
else if (time16 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
// 5pm timeslot
if (time17 > currentTime) {
$('.acts').addClass('future')
}
else if (time17 === currentTime) {
$('.acts').addClass('present')
}
else {
$('.acts').addClass('past')
}
};
$(document).ready(function () {
// Retrieve from local storage:
for (let i = 9; i <= 17; i++) {
// localStorage.setItem('item' + i, $(`#${i}`).next('textarea').val())
$(`#${i}`).next('textarea').val(
localStorage.getItem(`item${i}`)
)
}
})

.timeslots {
text-align: center;
border-radius: 15px;
}
.row {
white-space: pre-wrap;
height: 80px;
border-top: 1px solid white;
}
.hour {
background-color: #ffffff;
color: #000000;
border-top: 1px dashed #000000;
}
.past {
background-color: #d3d3d3;
color: white;
}
.present {
background-color: #ff6961;
color: white;
}
.future {
background-color: #77dd77;
color: white;
}
.saveBtn {
border: 1px solid black;
/*border-top-right-radius: 15px;
border-bottom-right-radius: 15px;*/
border-radius: 15px;
background-color: #06aed5;
color: white;
}
.saveBtn i:hover {
font-size: 20px;
transition: all 0.3s ease-in-out;
}
.timeslots {
display: flex;
justify-content: center;
font-size: 24px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid">
<div class="row">
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="9" data-value="9">9:00am</div>
<textarea class="col-8 border border-info acts" style="resize: none;"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="10" data-value="10">10:00am</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="11" data-value="11">11:00am</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="12" data-value="12">12:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="13" data-value="13">1:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="14" data-value="14">2:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="15" data-value="15">3:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="16" data-value="16">4:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
<section class="col-12 mb-3 row">
<div class="col-2 timeslots hour" id="17" data-value="17">5:00pm</div>
<textarea class="col-8 border border-info acts"></textarea>
<button type="button" class="col-2 btn btn-info saveBtn">Save</button>
</section>
</div>
<!-- Timeblocks go here -->
</div>

您不应该调用$('#10').children('div')，因为#10没有子级：

<div class="col-2 timeslots hour" id="10" data-value="10">10:00am</div>

相反，要获得#10的data-value，请调用$('#10').attr('data-value')，例如：

var time10 = parseInt($('#10').children('div').attr('data-value'));

这同样适用于time9到time17。