正在开发这个应用程序: https://jsfiddle.net/70jagnLo/
那么，目前情况如何，我单击左侧的“添加”按钮，出现模式，获取模式文本输入值，创建一个新的 div(项目名称)并将其附加到“添加”按钮下方的列表中。现在，我有一个 let 计数器来计算附加的每个新 div。
我的问题是，我想在打开信息的页面右侧创建一个新模式 关于每个单独的div(项目名称)并使其数据可更改。
每个 div 的每次创建都有一个新类(project1、project2、project3 等)。
如何单独访问每个项目并打开包含不同信息的模式？
const newProject = () =>{
let projectTitle = document.querySelector('#project-name').value;
projectCounter++;
let projectDiv = document.createElement('div');
projectDiv.classList.add('project' + projectCounter)
projectDiv.innerHTML = projectTitle;
projectsList.appendChild(projectDiv)
ProjectModal.closeModal();
document.querySelector('#project-name').value = '';
}
projectsList.addEventListener('click', function(e){
e.preventDefault();
let tgt = e.target;
let cls = e.target.classList
if (cls.contains('project1')){
ToDoFactory.createToDo();
}
})
在最后一个函数中，我可以为项目创建一个新的 div，但我必须手动执行此操作并为 cls.contains 添加“project1”。
最佳答案
我个人建议实现 localStorage 以将您的信息实际存储在 JSON 对象中。这样您以后就可以随时访问您的数据。
JS
document.addEventListener("DOMContentLoaded", function () {
projects = localStorage.getItem("projects");
if (projects.length == 0) { // create new projects object
projects = {};
} else {
projects = JSON.parse(projects);
}
function saveProject(data)
{
projects[data.title] = data;
localStorage.setItem("projects", JSON.stringify(projects));
}
function render()
{
let list = document.getElementById('list');
list.innerHTML = "";
for (let key in projects) {
let li = list.appendChild(document.createElement("li"));
li.dataset.id = projects[key].title;
li.innerText = projects[key].description;
li.onclick = function () {
let project = projects[this.dataset.id];
let form = document.getElementById('form');
form.elements.title.value = project.title;
form.elements.description.value = project.description;
/* set the form's data and show it */
}
}
}
document.getElementById('form').onsubmit = function (e) {
e.preventDefault(); e.stopPropagation();
let id = Date.now(); // or you can generate one yourself
saveProject(id, {
title: form.elements.title.value,
description: form.elements.title.description
});
render();
}
render();
});
HTML
<body>
<ul id="list"></ul>
<form id="form">
<input name="title" />
<input name="description" />
<button type="submit">save</button>
</form>
</body>
关于javascript - 如何通过特定按钮获取特定数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59565674/