文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我增加了一个本地存储功能，但是我创建的调度程序似乎不起作用，我不知道为什么

问我增加了一个本地存储功能，但是我创建的调度程序似乎不起作用，我不知道为什么
EN

Stack Overflow用户
提问于 2022-09-01 07:53:40
回答 1查看 53关注 0票数 0

因此，我为一个项目创建了一个工作日调度程序，iv设法在一天中的时间内添加了颜色阻塞，但我有真正的问题让本地存储在文本输入(例如:当我键入一个句子到一个时间块，我希望它保存，然后坚持重新加载页面)，任何帮助，我做错了，或任何建议如何使这项工作将不胜感激。

​

代码语言：javascript
复制
const clock = document.getElementById("clock");
setInterval(() => {
    const now = moment();
    const readable = now.format("dddd, MMMM Do YYYY, h:mm:ss a");
    clock.textContent = readable;

}, 1000);

// $(document).ready(function () {

    var saveBtn = document.querySelectorAll(".saveBtn");
    
    saveBtn.forEach(function(node) {
       
        node.addEventListener("click", function() {
           
            var description = $(this).siblings(".description").val();
            
            var time = $(this).parent().attr("id");
            
            localStorage.setItem(time, description);
    
        })
    });
    
    
    $("#hour1 .description").val(localStorage.getItem("hour1"));
    $("#hour2 .description").val(localStorage.getItem("hour2"));
    $("#hour3 .description").val(localStorage.getItem("hour3"));
    $("#hour4 .description").val(localStorage.getItem("hour4"));
    $("#hour5 .description").val(localStorage.getItem("hour5"));
    $("#hour6 .description").val(localStorage.getItem("hour6"));
    $("#hour7 .description").val(localStorage.getItem("hour7"));
    $("#hour8 .description").val(localStorage.getItem("hour8"));
    $("#hour9 .description").val(localStorage.getItem("hour9"));
    $("#hour10 .description").val(localStorage.getItem("hour10"));
    

    var elements = $(".time-block");
    var d = new Date();
    var h = d.getHours();


    for (i = 0; i < elements.length; i++) {
        var t = parseInt(elements[i].getAttribute("data-hour"));

        if (h < t) {
            elements[i].classList.add('future');
            elements[i].classList.remove('past');
            elements[i].classList.remove('present');
        } else if (h > t) {
            elements[i].classList.add('past');
            elements[i].classList.remove('future');
            elements[i].classList.remove('present');
        } else if (h === t) {
            elements[i].classList.add('present');
            elements[i].classList.remove('future');
            elements[i].classList.remove('past');
        } else if (h > 16 && h < 9) {
            elements[i].classList.add('future');
            elements[i].classList.remove('past');
            elements[i].classList.remove('present');
        }
    }
代码语言：javascript
复制
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1;
}

textarea {
  background: transparent;
  border: none;
  resize: none;
  color: #000000;
  border-left: 1px solid black;
  padding: 10px;
}

.jumbotron {
  text-align: center;
  background-color: transparent;
  color: black;
  border-radius: 0;
  border-bottom: 10px solid black;
}

.description {
  white-space: pre-wrap;
}

.time-block {
  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-left: 1px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #06aed5;
  color: white;
}

.saveBtn i:hover {
  font-size: 20px;
  transition: all 0.3s ease-in-out;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="./styles/style.css" />
  <title>Work Day Scheduler</title>
  <header class="jumbotron">
    <h1 class="display-3">Work Day Scheduler</h1>
    <p class="lead">A simple calendar app for scheduling your work day</p>
    <p id="currentDay" class="lead"></p>
    <div id="clock"></div>
  </header>
</head>

<body>
  <div class="container">
  <!-- Timeblocks go here -->

  <div id ="hour-1" data-hour="8" class = "row time-block">
    <div class="col-1 hour">
      8AM
    </div>
    <textarea id ="8AM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-2" data-hour="9" class = "row time-block">
    <div class="col-md-1 hour">
      9AM
    </div>
    <textarea id="9AM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-3" data-hour="10" class = "row time-block">
    <div class="col-md-1 hour">
      10AM
    </div>
    <textarea id="10AM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-4" data-hour="11" class = "row time-block">
    <div class="col-md-1 hour">
      11AM
    </div>
    <textarea id ="11AM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-5" data-hour="12" class = "row time-block">
    <div class="col-md-1 hour">
      12PM
    </div>
    <textarea id ="12PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-6" data-hour="13" class = "row time-block">
    <div class="col-md-1 hour">
      1PM
    </div>
    <textarea id="1PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-7" data-hour="14" class = "row time-block">
    <div class="col-md-1 hour">
      2PM
    </div>
    <textarea id="2PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-8" data-hour="15" class = "row time-block">
    <div class="col-md-1 hour">
      3PM
    </div>
    <textarea id="3PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-9" data-hour="16" class = "row time-block">
    <div class="col-md-1 hour">
      4PM
    </div>
    <textarea id="4PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-10" data-hour="17" class = "row time-block">
    <div class="col-md-1 hour">
      5PM
    </div>
    <textarea id="5PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src="./script.js"></script>
</body>

</html>

​

local-storage
momentjs
javascript
java
html
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-01 08:36:00

在这个街区：

代码语言：javascript
复制
var saveBtn = document.querySelectorAll(".saveBtn");
    
 saveBtn.forEach(function(node) {
       
   node.addEventListener("click", function() {
           
      var description = $(this).siblings(".description").val();
            
      var time = $(this).parent().attr("id");
            
      localStorage.setItem(time, description);
    
   })
});

您使用一个键存储在本地存储中，该键是按钮的父节点的id，即hour-1.hour-2。等

然后在这里：

代码语言：javascript
复制
 $("#hour1 .description").val(localStorage.getItem("hour1"));

您正在尝试设置.description of #hour1 的值，该值不存在来自本地存储键(不存在的 (hour1)的)。

因此，为了解决这个问题，只需选择正确的元素$("#hour-1 .description").val(localStorage.getItem("hour-1"));

在执行步骤和寻求帮助之前，一定要自己调试一下，例如，如果在将console.log(time, description)设置为本地存储之后，它会立即给出错误原因。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73565932

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档