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

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 中的变量不是块或函数的隐式本地变量。

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

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