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

内部函数引用最后一次调用的参数

2 个答案: