有什么方法可以将 Jquery 所做的 HTML 元素类更改保存在生成​​的 EJS 文件中？

Question

我有一个待办事项列表节点项目，其中每个待办事项列表都保存为 MongoDB 中的一个实体，如下所示：

var todoSchema = new mongoose.Schema({
  items: [String]
});

当用户单击待办事项列表中的一项时，它会通过更改所单击元素的 CSS 类将其删除。当用户刷新时，类会改回 EJS 文件的呈现方式。

我希望划掉是本地的，即只有划掉项目的人才能看到它被划掉。有什么方法可以不涉及为每个用户设置单独的数据库条目吗？

前条目：

{
    "_id": {
        "$oid": "59bf2fed71c3840508539b29"
    },
    "item": [
        "ayy",
        "yyaa",
        "yyaaaafyyy"
    ],
    "__v": 0
}

Answer 1

好的，这是一个功能性的解决方案：

后台

app.get('/testing', (req, res, next) => {
    const todoItems = {
        '_id': {
            '$oid': '59bf2fed71c3840508539b29'
        },
        'items': [
            { id: 0, todo: 'ayy' },
            { id: 1, todo: 'yyaa' },
            { id: 2, todo: 'yyaaaafyyy' }
        ],
        '__v': 0
    }

    res.render('testing', {
        todoItems
    })
})

前端

<style>
    .complete {
        text-decoration: line-through;
    }
</style>

将您的项目放入列表中。事件侦听器将添加到 ID 为 #todo

的元素内的每个 <li> 元素

<ul id="todo">
    <% todoItems.items.forEach((item) => { %>
        <li id="<%- item.id %>">
            <%= item.todo %>
        </li>
    <% }) %>
</ul>

这是一些放在</body>上方的JavaScript

<script>
    // Define a function that takes input of an HTML element
    // and then toggles the CSS class
    // then checks localStorage to see if the item is in it
    // if not, add it
    // if so, remove it
    const toggleComplete = (item) => {
        item.classList.toggle('complete')
        const isComplete = localStorage.getItem(item.innerText)
        if (!isComplete) {
            localStorage.setItem(item.innerText, 'complete')
            return
        }
        localStorage.removeItem(item.innerText)
    }

    // When the page loads, add an event listener to each <li>
    const items = document.querySelectorAll('#todo li')
    items.forEach((item) => item.addEventListener('click', () => toggleComplete(item)))

    // If the user leaves and comes back, we reinitialize
    // We step through the same array we add event listeners to
    // if the todo item is in localStorage, add the CSS class
    const reinitializeSession = () => {
        items.forEach((item) => {
            const isComplete = localStorage.getItem(item.innerText)
            if (!isComplete) return
            item.classList.add('complete')
        })
    }
    reinitializeSession()
</script>