javascript - 上次调用的内部函数引用参数

Question

似乎每次调用 edit() 函数时都会覆盖此函数中的变量。

function edit(el)
{
    $edit_img = $(el);
    $btn = $('<img width="15" height="15" src="images/add.png">');

    $edit_confirm = $edit_img.parent();

    $edit_confirm.append($btn);

    function restore_span()
    {
        $edit_img.show();

        $btn.remove();
    }

    $btn.click(restore_span);

    $edit_img.hide();
}

从此 onclick 处理程序调用编辑函数：

<img src = "images/edit-icon.png" width = "15px" height = "15px" onclick="edit(this)" />

在多个图像上调用 edit() 时，例如上面唯一的图像，最近创建的图像会被删除。

我应该如何修改此功能以修复此行为？

Answer 1

使用var $btn代替$btn（也用于其他变量）

当您编写 var $btn时-在没有时创建局部变量var-它是全局的

因此，在您的情况下，您每次都替换这些变量（例如$edit_img，用于恢复功能的变量）

Answer 2

与 PHP 不同，JavaScript 中的变量并不是块或函数的隐式本地变量。

要将变量声明为函数范围的局部变量，请使用varstatements：

function edit(el) {
    var $edit_img = $(el), // use them with comma
        $btn = $('<img width="15" height="15" src="images/add.png">');
    var $edit_confirm = $edit_img.parent(); // or just multiple times
    $edit_confirm.append($btn);
    $btn.click(function restore_span() {
        $edit_img.show();
        $btn.remove();
    });
    $edit_img.hide();
}