Question

我正在尝试构建一个脚本，它将删除DOM元素并将它们添加回原始位置。我做了一些研究，发现了一个看起来应该有效的代码片段。我遇到的唯一问题是全局变量LOelemsRemoved和LIelemsRemoved没有保留它们在.each匿名函数中获得的值。代码如下：

var LOelemsRemoved = [];
var LIelemsRemoved = [];

function switchContent() {
    if (loggedIn()) {
        $(".logged-out").each(function (i, o) {
            elem = $(o);
            window.LOelemsRemoved.push({
                loc: elem.prev(),
                obj: elem.detach()
            });
            alert(LOelemsRemoved.length); //returns the correct values for each iteration
            alert('removed LO elems');
            window.LOelemsRemoved = LOelemsRemoved;
        });
        alert(LIelemsRemoved.length); //outputs 0
        while (LIelemsRemoved.length) {
            elem = elemsRemoved.pop();
            elem.loc.after(elem.obj);
            alert("added LI elems");
        }
    } else {
        $(".logged-in").each(function (i, o) {
            elem = $(o);
            window.LIelemsRemoved.push({
                loc: elem.prev(),
                obj: elem.detach()
            });
            alert(LIelemsRemoved.length); //returns the correct values for each iteration
            alert('removed li elems');
            window.LIelemsRemoved = LIelemsRemoved;
        });
        alert(LOelemsRemoved.length); //outputs 0
        while (LOelemsRemoved.length) {
            elem = elemsRemoved.pop();
            elem.loc.after(elem.obj);
            alert('added LOEleems');
        }
    }
}

如您所见，两个变量都在switchContent()之外声明。 4个注释行显示哪些alert语句返回哪些值。 .each语句中的那些返回它们应该的值。但是，.each语句完成执行后，LOelemsRemoved和LIelemsRemoved的长度均为0。我猜这是一个范围问题，因为我使用的是匿名函数，但我对javascript并不是非常先进，所以我不确定范围问题是什么。谢谢！

Answer 1

也许你的vars定义在另一个函数中，在这种情况下它们是本地范围的。为了确保不会发生这种情况，而不是：

var LOelemsRemoved = [];
var LIelemsRemoved = [];

这样做：

window.LOelemsRemoved = [];
window.LIelemsRemoved = [];

Answer 2

我决定使用类似但略有不同的方法来完成此任务。一旦页面加载，我就运行：

window.$loggedInElements = $(".logged-in");
window.$loggedOutElements = $(".logged-out");
$loggedInElements.each(function(i,o) {
        var currElem = $(o);
        currElem.data("prev",currElem.prev());
    });

    $loggedOutElements.each(function(i,o) {
        var currElem = $(o);
        currElem.data("prev",currElem.prev());
    });

然后，在我的switchContent()函数中，我有这段代码：

function switchContent() {
    if(loggedIn())
    {

        $loggedInElements.each(function(i,o) {
            var currElem = $(o);
            currElem.addClass("logged-in");
            currElem.insertAfter(currElem.data("prev"));
        });
        $loggedOutElements.each(function(i,o) {
            //alert($(o).attr("id"));
            $(o).removeClass("logged-out");
            $(o).detach();
        });
    }
    else
    {

        $loggedOutElements.each(function(i,o) {
            var currElem = $(o);
            currElem.addClass("logged-out");
            currElem.insertAfter(currElem.data("prev"));
        });
        $loggedInElements.each(function(i,o) {
            //alert($(o).attr("id"));
            $(o).removeClass("logged-in");
            $(o).detach();
        });
    }
}

jQuery匿名函数不适用于全局变量

2 个答案: