个人中心
gpt4 book ai didi

javascript - 如何通过特定按钮获取特定数据

转载 作者：行者123 更新时间：2023-12-01 00:19:07 25 4
gpt4 key购买 nike

正在开发这个应用程序: 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/

25 4 0
文章推荐： python - 如果 TCP 通信中丢失数据包，如何将客户端重新连接到服务器？
文章推荐： sql - Oracle 动态透视
文章推荐： php - mysql选择具有最高最大值的行
文章推荐： php - 使用 php 连接数据库时出现未定义的属性错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com