Question

这有点棘手，但我需要将大代码块设置为通用。

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

我将每个图标上的点击操作连接到打开标准对话框的位置以请求确认。你可以猜到，＆＃34;是＆＃34;对话框的按钮将有一个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行生效时才会生效，并且正下方的通用行会被注释掉。

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

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


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

因此，我将代码块移动到一个名为＆＃34; wireDeleteIcons，＆＃34;的函数中。接受：

记录类型为字符串，
执行删除的功能，如deleteCase（）或deleteContact（）。

在我的“联系人”视图中，我呼吁：

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

到目前为止，除了点击图标时的deleteFunction（itemId）调用之外，它都是有效的。

如果你回头查看大代码块，请查看评论的onclick行下方的行。

我正在尝试将参数itemId添加到传递的函数中。在测试时，它会一直到我的deleteContact（）函数，，但它不会传入_id。所以，我的console.log按照我的deleteContact（）函数显示，＆＃34;您删除了id = undefined＆＃34;

的项目

如何一般传递函数，并从我的通用wireDeleteIcons（）函数中插入参数？

Answer 1

你的deleteFunction()需要争论：

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

但你真的不需要deleteFunction变量。只需写下：

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);

        });

    });
}

Javascript：带参数的动态函数

1 个答案: