Javascript：带参数的动态函数

这有点棘手，但我需要将下面的大型代码块设置为泛型

我有许多视图采用相同的格式：一个充满行的表，其中每行包含一个删除图标。每个图标都有一个数据id属性，该属性是数据库中项目的_id

我将每个图标上的单击操作连接到打开标准对话框以请求确认的位置。您可以猜到，对话框的“是”按钮将有一个onclick，它使用项目id的参数调用所需的函数。例如，设置

onclick=deleteContact（fdke75jdsgtd7i）

假设我有3张表：联系人、案例和公司

只要我在每个视图中复制并粘贴下面的代码块，我就可以为任何给定的表进行所有的连接，但需要注意的是，我必须使用注释的onclick行，而不是它下面的一般的、未注释的行

let deleteItemAnchors = document.getElementsByClassName("delete-item");

Array.from(deleteItemAnchors).forEach( (item) => {

    item.addEventListener('click', () => {

        // Highlight the selected row.
        highlightedTableRow = item.closest("tr");
        highlightedTableRow.classList.add("table-warning");

        // The record's _id is in the data-id attribute.
        let itemId = item.getAttribute("data-id");

        let buttons = [{
            //onclick: () => { removeTableRowHighlight(); deleteContact(itemId); },
            onclick: () => { removeTableRowHighlight(); deleteFunction(itemId); },
            text: "Yes"
        }, {
            onclick: () => { removeTableRowHighlight(); },
            text: "No",
            class: "btn-secondary"
        }];

        let confirmDelete = new CustomDialog("Delete this " + recordType + "?", 'Click "Yes" to delete it.  Press "No" to cancel.', buttons);

    });

});

单击按钮时调用的函数示例如下：

function deleteContact(itemId) {
    console.log("You deleted the item with id = " + itemId);
}

请记住，只有当注释的onclick行是活动的，并且它下面的泛型行是comment out时，它才起作用。

我想停止为每个视图重新创建一大块代码，方法是将其移动到一个可重用的函数，该函数可以从3个视图中的每个视图调用，如下所示：

let deleteFunction = () => { deleteContact(); };  
wireDeleteIcons("Contact", deleteFunction);


let deleteFunction = () => { deleteCase(); };
wireDeleteIcons("Case", deleteFunction);

因此，我将代码块移动到一个名为“wireDeleteIcons”的函数，该函数接受：

• 记录类型为字符串，并且
• 执行删除操作的函数，如deleteCase（）或deleteContact（）

从我的联系人视图中，我正在呼叫：

let deleteFunction = () => { deleteContact(); };  
wireDeleteIcons("Contact", deleteFunction);

到目前为止，除了单击图标时的deleteFunction（itemId）调用外，所有功能都正常工作

如果您回顾一下大代码块，请查看注释的onclick行下面的行

我试图将参数itemId添加到传递的函数中。在测试时，它会一直运行到我的deleteContact（）函数，但它不会传入_id。因此，根据我的deleteContact（）函数，my console.log显示，“您删除了id=未定义的项”

如何以通用方式传递函数，并从通用wireDeleteIcons（）函数中插入参数？

您的

deleteFunction（）

需要使用参数：

let deleteFunction = (id) => deleteContact(id);

但实际上并不需要

delete函数

变量。只要写下：

wireDeleteIcons("Contact", deleteContact);
wireDeleteIcons("Case", deleteCase);

wireDeleteIcons

的定义如下：

function wireDeleteIcons(tableId, deleteFunction) {
    let deleteItemAnchors = document.getElementById(tableId).getElementsByClassName("delete-item");

    Array.from(deleteItemAnchors).forEach( (item) => {

        item.addEventListener('click', () => {

            // Highlight the selected row.
            highlightedTableRow = item.closest("tr");
            highlightedTableRow.classList.add("table-warning");

            // The record's _id is in the data-id attribute.
            let itemId = this.getAttribute("data-id");

            let buttons = [{
                onclick: () => { removeTableRowHighlight(); deleteFunction(itemId); },
                text: "Yes"
            }, {
                onclick: () => { removeTableRowHighlight(); },
                text: "No",
                class: "btn-secondary"
            }];

            let confirmDelete = new CustomDialog("Delete this " + recordType + "?", 'Click "Yes" to delete it.  Press "No" to cancel.', buttons);

        });

    });
}

---

添加

console.log（itemId）

after

let itemId=item.getAttribute（“数据id”）-您在控制台中看到了什么？@Igor我看到了5a4292d983e1cd0a6cd35eda。它的类型是string。问题是我需要从wiredeteIcons（）函数内部分配参数id。在那里，id是已知和可用的。在这之前它是未知的。它是否已经像您在第一个代码块中所显示的那样执行了
deleteFunction（itemId）
？它试图执行。My console.log显示，当itemId点击deleteContact（）时，它是未定义的。记住，我将deleteContact（）作为参数传递给wireDeleteIcons（）。此时，deleteContact（）没有参数。wireDeleteIcons（）将其作为deleteFunction（）接收，同样不带参数（它只是对deleteContacts的引用）。我正试图在您指示的行中将一个参数推入其中，但按我使用的语法推送不会发生。请记住，我没有在wireDeleteIcons（）中运行该函数。我只是想把这个功能附加到按钮的点击上。但是我需要将itemId作为一个参数添加到这个“无参数”函数中。