- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
对于这个待办事项列表,我可以添加一个列表。但是,一旦添加,我在编辑已添加的列表时遇到问题。我希望当您单击“编辑”时,您应该能够编辑信息并上传编辑后的信息(并确保在您单击“将列表保存到本地存储”时将编辑后的信息保存在本地存储中)。有人可以帮我检查一下 JavaScript 代码,看看我做错了什么吗?以下是 HTML、JavaScript 和 CSS 代码:
如果下载文件更容易,这里是 Dropbox 链接:https://www.dropbox.com/sh/qaxygbe95xk4jm1/AADPO98m4416d-ysSGjNt12La?dl=0
<html>
<head>
<title>Dynamic To-do List</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="Dynamic To-do List.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript"></script>
<script src="Dynamic To-do List.js" defer="defer"></script>
</head>
<body onload="loadList();">
<h1>To-Do List</h1> Click Button to Add List: <a href="#" onclick="showListDiv();">Add List </a>
<div id="listFormDiv">
<form id="addListForm">
List name :
<input type="text" id="listNameTxt"><br />
Description : <textarea name="description" id="listDescTxt"></textarea><br />
Date: <input type="text" id="listDateTxt"><br />
Urgent (Yes or No) :
<select id="listUrgentTxt" name="Urgent">
<option value="Yes"> Yes </option>
<option value="No"> No </option>
</select><br />
Category :
<select id="listCategoryTxt" name="category">
<option value="School"> School </option>
<option value="Work"> Work </option>
<option value="Home"> Home </option>
<option value="Others"> Others </option>
</select>
<input type="button" id="addListBtn" value="Add List" onclick="addList()" />
<input type="button" id="updateListBtn" value="Update List" onclick="updateList()" style="visibility: hidden" />
</form>
</div>
<div id="container">
<a href="#" onclick="saveLists();">Save List to Local Storage</a><br />
<a href="#" onclick="clearStorage();">Clear Local Storage</a><br />
<div id="listsDiv">
Add To-Do list here<br />
<a href="#" onclick="hideList();">Hide List</a><br />
<a href="#" onclick="showList();">Show List</a><br />
</div>
</div>
</body>
</html>
sortableList();
$(function() {
$("#listDateTxt").datepicker();
});
function loadList() {
console.log(localStorage.getItem("lists"));
var taskList = JSON.parse(localStorage.getItem("lists"));
if (!taskList) {
console.log("There are no tasks saved in the local storage");
} else {
for (var i = 0; i < taskList.length; i++) {
createListDiv(taskList[i]);
}
}
}
//get a reference to the listFormDiv div tag that has the add To-Do List form. list is a global variable that can be access easily from any function
var listFormDiv = getElement("listFormDiv");
var listArray = Array(); //list will hold all the To-do list added through the form
var listIDCount = 0; // list variable will be incremented every time a list is added and will be used to assing a unique ID to every list object.
if (localStorage.getItem("lists")) {
listArray = JSON.parse(localStorage.getItem("lists"));
}
function clearStorage() {
localStorage.clear();
listArray = [];
}
function getElement(id) {
return document.getElementById(id);
}
//function to show the div with the add to-do list form when the add list hyperlink is clicked onLine
function showListDiv() {
//var st = window.getComputedStyle(listFormDiv,null);
console.log(listFormDiv);
listFormDiv.style.display = "block";
}
//list function adds a list when the "add list" button on the form is pressed - 3rd step
function addList() {
var listName = getElement("listNameTxt").value;
var listDesc = getElement("listDescTxt").value;
var listDate = getElement("listDateTxt").value;
var listUrgent = getElement("listUrgentTxt").value;
var listCategory = getElement("listCategoryTxt").value;
//create an instance of the list object with the values from the form
var f;
if (listCategory == "School") {
f = new schoolTask();
f.setValues(listName, listDesc, listDate, listUrgent, listCategory, "blue");
} else if (listCategory == "Work") {
f = new workTask();
f.setValues(listName, listDesc, listDate, listUrgent, listCategory, "red");
}
console.log("school task is " + JSON.stringify(f));
//clear the textboxes in the form
getElement("listNameTxt").value = "";
getElement("listDescTxt").value = "";
getElement("listDateTxt").value = "";
getElement("listUrgentTxt").value = "";
getElement("listCategoryTxt").value = "";
var listAddButton = getElement("addListBtn");
var listEditButton = getElement("updateListBtn");
console.log(listAddButton);
//listAddButton.style.visibility = "visible";
listEditButton.style.visibility = "hidden";
listFormDiv.style.display = "none";
//add the new list object to the global listArray.
listArray.push(f);
//increment the listID count
listIDCount++;
//add the list to the page and pass in the newly created list object to the createListDiv function
createListDiv(f)
}
// a list object - the second step
function setValues(name, desc, date, urgent, category, color) {
this.name = name;
this.desc = desc;
this.date = date;
this.urgent = urgent;
this.category = category;
this.color = color;
}
function list() {}
//list.prototype.name = "blank name";
list.prototype.name = "blank";
list.prototype.desc = "blank desc";
list.prototype.date = "blank";
list.prototype.urgent = "blank";
list.prototype.category = "blank";
list.prototype.listID = "blank";
list.prototype.color = "blank";
list.prototype.setValues = setValues;
//list.prototype.name = "test";
function schoolTask() {
this.address = "25 Timau Road";
}
inheritFrom(schoolTask, list);
function workTask() {
this.room = "303f";
}
inheritFrom(workTask, list);
function inheritFrom(child, parent) {
child.prototype = Object.create(parent.prototype);
}
//create a div tag to represent the new list and add the new div to the existing place holder div on the page
function createListDiv(list) {
var listDiv = document.createElement("DIV");
listDiv.setAttribute("class", "listClass");
var nameTxt = document.createElement("DIV");
nameTxt.innerHTML = "To-do List Name: " + list.name;
nameTxt.id = "nameTxt" + list.listID;
var lineBreak = document.createElement("BR");
var descTxt = document.createElement("DIV");
descTxt.innerHTML = "Description: " + list.desc;
descTxt.id = "descTxt" + list.listID;
var dateTxt = document.createElement("DIV");
dateTxt.innerHTML = "Date: " + list.date;
dateTxt.id = "dateTxt" + list.listID;
var urgentTxt = document.createElement("DIV");
urgentTxt.innerHTML = "Urgent: " + list.urgent;
urgentTxt.id = "urgentTxt" + list.listID;
var categoryTxt = document.createElement("DIV");
categoryTxt.innerHTML = "Category: " + list.category;
categoryTxt.id = "categoryTxt" + list.listID;
var editLink = document.createElement("A");
editLink.setAttribute("onclick", "editList(" + list.listID + ");"); //Note that we are passing the listID from the list object when calling the editList so we know which list object to fetch to edit when we are editing
editLink.setAttribute("href", "#");
editLink.id = "editLink" + list.listID;
editLink.innerHTML = "Edit";
listDiv.appendChild(nameTxt);
listDiv.appendChild(lineBreak);
listDiv.appendChild(descTxt);
listDiv.appendChild(lineBreak);
listDiv.appendChild(dateTxt);
listDiv.appendChild(lineBreak);
listDiv.appendChild(urgentTxt);
listDiv.appendChild(lineBreak);
listDiv.appendChild(categoryTxt);
listDiv.appendChild(lineBreak);
listDiv.appendChild(editLink);
getElement("listsDiv").appendChild(listDiv);
}
//global variable to remember which element in the listArray we are editing
var listIndex;
function editList(listID) {
//get the the list object from the array based on the index passed in
var list;
//show the update list button on the html form and hide the add list button on the same form
var listAddButton = getElement("addListBtn");
var listEditButton = getElement("updateListBtn");
listAddButton.style.visibility = "hidden";
listEditButton.style.visibility = "visible";
//iterate through the listsArray until we find the list object that has the same ID as the id passed in to the function
for (var i = 0; i < listArray.length; i++) {
//if the listID in the list object is the same as the listID passed in to the function then assign the object from the array to the list variable in list function
if (listArray[i].listID == listID) {
//we found the list with the right ID
list = listArray[i];
listIndex = i;
}
}
listFormDiv.style.display = "block";
getElement("listNameTxt").value = list.name;
getElement("listDescTxt").value = list.desc;
getElement("listDateTxt").value = list.date;
getElement("listUrgentTxt").value = list.urgent;
getElement("listCategoryTxt").value = list.category;
//updateList(listIndex);
}
//list function will be called when the update button is pressed on the form
function updateList() {
//save the changed information from the form into the list object in the array based on the array index passed in
listArray[listIndex].name = getElement("listNameTxt").value;
listArray[listIndex].desc = getElement("listDescTxt").value;
listArray[listIndex].date = getElement("listDateTxt").value;
listArray[listIndex].urgent = getElement("listUrgentTxt").value;
listArray[listIndex].category = getElement("listCategoryTxt").value;
var listID = listArray[listIndex].listID; // get the listID from the list object that is in the listsArray at the specificed index;
//now reflect the same changes in the DIV that shows the list
getElement("nameTxt" + listID).innerHTML = "To-do List Name: " + getElement("listNameTxt").value;
getElement("descTxt" + listID).innerHTML = "Description: " + getElement("listDescTxt").value;
getElement("dateTxt" + listID).innerHTML = "Date: " + getElement("listDateTxt").value;
getElement("urgentTxt" + listID).innerHTML = "Urgent: " + getElement("listUrgentTxt").value;
getElement("categoryTxt" + listID).innerHTML = "Category: " + getElement("listCategoryTxt").value;
//reset the listIndex to a value that does not exisit in the array index
listIndex = -1;
var listAddButton = getElement("addListBtn");
var listEditButton = getElement("updateListBtn");
listAddButton.style.visibility = "visible";
listEditButton.style.visibility = "hidden";
//reset form div visibility
listFormDiv.style.display = "none";
getElement("listNameTxt").value = "";
getElement("listDescTxt").value = "";
getElement("listDateTxt").value = "";
getElement("listUrgentTxt").value = "";
getElement("listCategoryTxt").value = "";
}
//Sortable list - http://jqueryui.com/sortable/
function sortableList() {
$("#listsDiv").sortable({
update: function(updateList) {
var sortOrder = getElement(list).sortable('listArray').toString();
console.log(sortOrder);
}
});
}
function saveLists() {
localStorage.setItem("lists", JSON.stringify(listArray));
}
//Hide and Show list
function hideList() {
var listsDiv = getElement("listsDiv");
if (listsDiv.style.display == "block") {
//listsDiv.style.display = "none";
alert("Find a way to hide the list");
}
}
function showList() {
var listsDiv = getElement("listsDiv");
if (listsDiv.style.display == "none") {
listsDiv.style.display = "block";
}
}
#listFormDiv {
border: 1px solid black;
height: 350px;
width: 200px;
position: absolute;
top: 100px;
left: 100px;
padding: 10px;
display: none;
}
#listsDiv { /*Possible #listsDiv*/
height: 350px;
width: 200px;
}
#listDescTxt {
height: 100px;
}
#container {
border: 1px solid black;
height: 650px;
width: 400px;
margin-bottom: 20px;
position: absolute;
top: 100px;
left: 500px;
}
.listClass {
border: 1px solid red;
height: 160px;
width: 200px;
padding: 5px;
}
最佳答案
list.listID 被分配为“空白”;
由此而来>
//list.prototype.name = "blank name";
list.prototype.name = "blank";
list.prototype.desc = "blank desc";
list.prototype.date = "blank";
list.prototype.urgent = "blank";
list.prototype.category = "blank";
Line 145: list.prototype.listID = "blank";
list.prototype.color = "blank";
list.prototype.setValues = setValues;
这就是为什么在这里分配时 >
Line 204: editLink.setAttribute("onclick","editList(" + list.listID + ");");
您单击编辑按钮,它发送的不是 *ID,而是“空白”。
你可能想在这里重新分配 id >
Line 110: //Assign the id before you push eg. (f.listID == listIDCount++)
//add the new list object to the global listArray.
listArray.push(f);
//increment the listID count
//listIDCount++; why am I incrementing?
//add the list to the page and pass in the newly created list object to the createListDiv function
createListDiv(f)
关于JavaScript - 动态待办事项列表 - 编辑列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38284632/
如标题所示,ans_list是一个答案列表,ans_index是一个数字(答案在词汇表中的索引,但与atm无关) 这里生成的 tree.anslist 是什么? (例如,仅针对第一个),忽略迭代。 f
我目前将用户的输入存储在逗号分隔的列表中,如下所示: Userid | Options 1 | 1,2,5 用户在一个数组形式中勾选一组选项,然后用逗号连接起来 1,2,5 然后 MySQ
我目前将用户的输入存储在逗号分隔的列表中,如下所示: Userid | Options 1 | 1,2,5 用户在一个数组形式中勾选一组选项,然后用逗号连接起来 1,2,5 然后 MySQ
我想知道如何完全展平列表和包含它们的东西。除其他外,我想出了一个解决方案,它可以将具有多个元素的东西滑倒并将它们放回原处,或者在滑倒后将具有一个元素的东西拿走。 这与 How do I “flatte
我想知道如何完全展平列表和包含它们的东西。除其他外,我想出了一个解决方案,它可以将具有多个元素的东西滑倒并将它们放回原处,或者在滑倒后将带有一个元素的东西拿走。 这与 How do I “flatte
这个问题已经有答案了: Convert nested list to 2d array (3 个回答) 已关闭 7 年前。 java中有没有快捷方式可以转换 List> 到 String[][] ?
我在排序时遇到问题 List> 。我创建了一个自定义比较器,在其中编写了对数据进行排序的代码。 public class CustomComparator implements Comparator
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Java Generics: Cannot cast List to List? 我只是想知道为什么下面的java代
试图想出一个 LINQy 方法来做到这一点,但我什么也没想到。 我有一个对象列表<>,其中包含一个属性,该属性是逗号分隔的字母代码列表: lst[0].codes = "AA,BB,DD" lst[1
假设我有这些任务: points = [] point = (1, 2) 我怎么会这样做: points += point 它工作得很好,并且给了我点 = [1, 2]。但是,如果我这样做: poin
如何在 scala 中将 List[Task[List[Header]]] 类型转换为 Task[List[Header]]。 我有一个方法返回 Task[List[Header]] 并多次调用 do
如何在 Java 中查找二维列表的元素? 我有一个参数为 List> 的函数我想知道如何找到这个列表的行和列。 最佳答案 如果你喜欢 List> obj 然后你就可以像这样访问 obj.get(cur
分配 List到 List工作正常。 分配 List>到 List>不编译。 代码 public class Main { public static void main(String[] a
我正在用 Java 编写一个方法,该方法必须接收并迭代 Serializable 的 List。 有什么区别: public void myMethod(List list) { } 和 public
我看到很多人想用 mvvm 更新网格/列表/树的一部分,但他们不想刷新整个列表。 对于所有遇到此问题的人,我做了以下示例。 希望这对你有用。 最佳答案 这是一个简单的例子。整个代码中最重要的是: Bi
我正在为现有的 C++ 库编写包装器,该库使用列表,其中 T 是自定义结构。我被建议使用 vector 而不是列表,但我试图避免修改库。 为了更好地理解这个场景,我做了一个简单的应用程序,使用一个列表
List list List list 这两种声明有什么区别吗? 谢谢, 最佳答案 是的。 List可以包含所有派生自 Base 的不同事物的混合物. List包含同质项(从某种意义上说,它们必须全部
有人可以尽可能详细地解释以下类型之间的区别吗? List List List 让我更具体一点。我什么时候想使用 // 1 public void CanYouGiveMeAnAnswer(List l
我有一个元组列表,每个元组都是一对列表。所以我的数据看起来像: mylist = [(['foo', 'bar'], ['bar', 'bar']),(['bar', 'bar'],['bar', '
也许是一个时髦的标题,但我遇到了以下问题: 给定一个类型为 (a * b) list 的列表,我想创建一个类型为 (a * b list) list 的新列表。一个例子: 给定列表 let testL
我是一名优秀的程序员,十分优秀!