【发布时间】：2020-12-22 07:40:25
【问题描述】：
我有一个可以动态制作可折叠的程序，然后用户可以将内容输入到他们选择（单击）的可折叠中。当用户将内容添加到特定的可折叠时，我试图将用户输入存储在本地存储中的数组中。我试图这样做：
当用户创建一个新的可折叠对象时，一个新的数组也会随之创建：
function addElement() {
/*add closable and it's title*/
//make new array for closables content:
contentArray = new Array();
contentArray.id = "Content array:" + contentArrayNum;
contentArrayNum++
localStorage.setItem("contentArray",JSON.stringify(contentArray));
}
用户可以使用输入框添加到选定的可折叠内容中，该输入框在选择（单击）时附加到可关闭的内容中。当他们将内容输入到选定的可折叠时，我正在尝试将用户输入添加到使用可折叠创建的数组中。但是我很困惑如何引用使用可折叠创建的数组，我尝试了这个（但它（显然）不起作用）：
function selectedColl() {
currentClosable = event.target;
currentContent = currentClosable.nextElementSibling;
currentArray = currentClosable.array; //reference array(that was made with closable) for the selected closable
console.log(currentArray)
document.getElementById("inputTaskDiv").style.display = "block";//shows input box for selected closabales content
var inputTaskDiv = document.getElementById("inputTaskDiv");//appends the input box to the selcted closables
$(currentContent).append(inputTaskDiv);
}
我不确定这是否可能，或者可能有更简单的方法来尝试我正在尝试做的事情。我想要做的只是：将所选可关闭的输入内容存储在本地存储中，或者以数组或其他任何可以将所选可折叠的输入分组到本地存储中。请要求澄清如果你需要的话。
这是我的完整代码（注释本地存储）：
var currentClosable;
var currentContent;
var currentArray;
var contentArrayNum = 0;
var contentArray;
function selectedColl() {
currentClosable = event.target;
currentContent = currentClosable.nextElementSibling;
//currentArray = currentClosable.array;
//console.log(currentArray)
document.getElementById("inputTaskDiv").style.display = "block";//shows input box for selected closabales content
var inputTaskDiv = document.getElementById("inputTaskDiv");//appends the input box to the selcted closables
$(currentContent).append(inputTaskDiv);
}
var taskCounter = 0;
function addTask() {
var text = document.getElementById("taskInput").value;
// create a new div element and give it a unique id
var newTask = $("<div class='currentTask'><input class='checkbox' type='checkbox'><span class='text'>" + text + "</span></div>");
newTask.id = 'temp' + taskCounter;
taskCounter++;
// and give it some content
var newContent = document.createTextNode(text);
$(currentContent).append(newTask);
// store the content in localStorage
////here
// end of local storage
$(".currentTask").hover(
function() {
var taskCur = event.target;
$(this).find("a").last().remove();
$(taskCur).append($("<a class='taskX'> x</a>"));
function dump() {
$(taskCur).remove();
}
$("a").on("click", dump);
},
function() {
$(this).find("a").last().remove();
});
document.getElementById("taskInput").value = " ";
}
var elementCounter = 0;
var elementCounterContent = 0;
var text;
function addElement() {
text = document.getElementById("input").value;
// create a new div element and give it a unique id
var newDiv = $("<button class='collapsible'><span class='text'>"+text+"</span></button>");
$(newDiv).append("<button class='btnDelete'>Delete</button>");
var newContentOfDiv = $("<div class='content'></div>");
newDiv.id = 'temp' + elementCounter;
newContentOfDiv.id = elementCounterContent;
newDiv.classList = "div";
elementCounter++
elementCounterContent++
// and give it some content
var newContent = document.createTextNode(text);
// add the newly created element and its content into the DOM
document.getElementById("input").value = " ";
$("#divColl").append(newDiv, newContentOfDiv);
// store the closable(s) in localStorage
var arr = [];
arr = $("#divColl").find("button .text")
.map(function() { return this.textContent })
.get();
//array for content of closables
contentArray = new Array();
contentArray.id = "Content array:" + contentArrayNum;
contentArrayNum++
//localStorage.setItem("arr",JSON.stringify(arr));
//localStorage.setItem("contentArray",JSON.stringify(contentArray));
//console.log($("#divColl").find("button .text").map
//(function() { return this.textContent }).get())
// end of local storage
newDiv.click(function() {
selectedColl();
this.classList.toggle("active");
content = this.nextElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
}
$("#divColl").on('click', '.btnDelete', function() {
$(this).closest('.collapsible').remove();
content.style.display = 'none';
});.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.taskX {
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!---Add Step --->
<div id="addSteps">
<p>Make a collapsible:</p>
<input id="input" type="text" placeholder="title for collapsible"><button onclick="addElement()">Make collapsible</button>
</div>
<!-- Add content to Collapsable (display:none) --->
<div id="addTasksToSteps" style="display:none">
<div id="inputTaskDiv" style="display:none">
<input id="taskInput" type="text"><button onclick="addTask()">Add content</button>
</div>
</div>
<div id="divColl"></div>
</body>
</html>【问题讨论】：
标签： javascript html jquery arrays