如何将事件侦听器添加到多个按钮，每个按钮修改数据的不同部分答案

【问题标题】：How to add event listeners to multiple buttons which each modify different parts of the data如何将事件侦听器添加到多个按钮，每个按钮修改数据的不同部分
【发布时间】：2020-12-29 07:11:36
【问题描述】：

我正在处理我的第一个个人项目，我几乎完成了，但我正在努力让一些按钮工作。我的项目是一个可以保存书签的项目，其中有一列收藏收藏的书签，一列用于保存其他已保存的书签。这些按钮每个都对应于从数据库中检索到的项目（我将 Firestore 用于我的数据库，但在这篇文章中，我已对其进行了修改以消除对 Firestore 的需求），因此不会硬编码到 html 文件中。保存新书签时，它有一个名称（例如“Reddit”）、一个网址（“www.reddit.com”）和一个表示其收藏状态的布尔值（如果是收藏则为 true，否则为 false） .我希望每个书签都有一个关联的按钮，可以单击该按钮将书签移动到另一列。我被困在如何为数据库中的每个项目添加一个事件侦听器，它只修改该项目的数据。代码如下（底部有更多解释。

可以在此处找到完整代码（包括完整运行程序所需的一切）：https://github.com/matt-manning/Bookmarker

这是一个最小化的版本（仍然足够单独使用）：

const bookmarkList = document.querySelector('#other-list');
const favoriteList = document.querySelector('#favorite-list');
const form = document.querySelector('#add-bookmark');

function start() {
    const db = [
        {website: 'Reddit', url: 'www.reddit.com', favorite: true},
        {website: 'Google', url: 'www.google.com', favorite: false},
        {website: 'Netflix', url: 'www.netflix.com', favorite: true},
        {website: 'YouTube', url: 'www.youtube.com', favorite: false}
    ];
    const bookmarkData = setupBookmarks(db);
    registerBookmarkEventListeners(db, bookmarkData);
}

const setupBookmarks = (data) => {
    let favoritesHTML, bookmarksHTML = '';
    const bookmarkData = [];
    if (data && data.length) {
        data.forEach(doc => {
            const bookmarkId = Math.floor(Math.random() * 10000000);
            const bookmark = doc;
            if (bookmark.favorite) {
                favoritesHTML += bookmarkHTML(bookmark, bookmarkId);
            } else {
                bookmarksHTML += bookmarkHTML(bookmark, bookmarkId);
            }
            bookmarkData.push({bookmark, bookmarkId});
        })
    }
    favoriteList.innerHTML = favoritesHTML;
    bookmarkList.innerHTML = bookmarksHTML;
    return bookmarkData;
}

const bookmarkHTML = (bookmark, bookmarkId) => {
    let html = '';
    // cut for minimizing; here is a potentially relevant snippet. Full code can be found in the github link above.
    const li =
        `<li>
            <button class='btn-flat waves-light btn-small right listener' id='${bookmarkId}'>
                <i class='material-icons left'>compare_arrows</i>switch</button>
        <li>`;
    html += li;
    return html;
}

我的问题在于 registerBookmarkEventListeners 函数。我想要这个函数做的是向每个书签上的按钮添加一个事件侦听器，当单击该按钮时，所述书签中的“收藏夹”布尔值变为相反，这将使书签切换到另一列.

这是我做过的一些尝试（更多尝试可以在 github 链接中找到）：

const registerBookmarkEventListeners = (data, bookmarkData) => {
    document.querySelectorAll('.listener').forEach(elem => {
        elem.addEventListener('click', e => {
            e.preventDefault();
            const bookmark = elem;
            if (bookmark.favorite) {
                bookmark.favorite = false;
            } else {
                bookmark.favorite = true;
            }
        })
    })
}

const registerBookmarkEventListeners = (data, bookmarkData) => {
    const {bookmark, bookmarkId} = bookmarkData;
    bookmarkData.forEach(item => {
        const btnElement = document.querySelector(`#${bookmarkId}`);
        btnElement.addEventListener('click', e => {
            e.preventDefault();
            if (bookmark.favorite) {
                bookmark.favorite = false;
            } else {
                bookmark.favorite = true;
            }
        })
    })
}

我明白为什么我的上述尝试不起作用。第一个甚至不使用数据库中的数据给出的任何一个参数。第二个使用bookmarkId，但它没有“连接”（如果这是正确的话）它应该修改的数据。我正在努力找出如何使这个 addEventListener 工作。

那么，如何通过循环将事件侦听器添加到按钮，每个循环直接修改数据的不同部分？

感谢您的帮助。

另外，为了完整起见，这里是运行程序所需的相关 HTML：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bookmarker</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <div class='row logged-in show-none'>
        <div class="col s6">
            <h5>Favorites</h5>
            <ul id='favorite-list'></ul>
        </div>
        <div class="col s6">
            <h5>Bookmarks</h5>
            <ul id='other-list'></ul>
        </div>
    </div>
    <script src='script.js'></script>
</body>
</html>

【问题讨论】：

标签： javascript button addeventlistener

【解决方案1】：

如果您在 bookmarkData.forEach(item => ... 中获得该项目，那么您应该将解构放在那个大括号中并有类似的东西

const { bookmarkId, bookmark } = item;

【讨论】：

【解决方案2】：

我这样做的方式：

将带有 id 的数据传递给 registerBookmarkEventListeners 函数。
ForEach 在每个元素上。
查找 id 与数据 id 匹配的按钮并添加侦听器。
更改该元素的收藏夹。

如果你卡住了，你可以在下面找到代码。请注意，我通过在数字前添加“x”更改了您的 html 代码中按钮的 ID，您仍然需要弄清楚更改后如何呈现项目。

registerBookmarkEventListeners(bookmarkData); // 1

const registerBookmarkEventListeners = (data) => {
    data.forEach(bookmark => { // 2
        document.querySelector(`#x${bookmark.bookmarkId}`).addEventListener('click', (e) => { // 3
                bookmark.bookmark.favorite = !bookmark.bookmark.favorite; // 4
                console.log(bookmark);
        })
    })
}

【讨论】：