javascript - 除非有警报，否则 Jquery 变量无法获取正确的值

Question

这让我发疯，我不知道是什么导致了这个问题。我有两个数组，一个列出 pageID，另一个列出页面。

当我尝试使用以下代码时，“页面”总是发回“前面”。如果我在声明变量“var newObject”之前在 for 循环中发出警报，则输出是正确的，并且页面显示“front、insideLeft、insideRight 和 back”。

所有其他属性均正确输出。

请在下面找到我的代码:

    var pageID = ["cardFront","cardInsideL","cardInsideR","cardBack"];
    var pages = ["front","insideLeft","insideRight","back"];

    for (var i=0; i<pageID.length; i++) {
        var cfTextarea = $('#' + pageID[i] + ' textarea'); //array of textareas

        //Get each textarea properties and encode to json
        $("#" + pageID[i] + " textarea").each(function(){

        var txtOffset = $(this).offset();
        var divOffset = $("#" + pageID[i]).offset();

        var newObject = { 
            'page'      : pages[i],
            'id'        : $(this).attr('id'),
            'src'       : $(this).attr('src'),
            'width'     : $(this).width(),
            'height'    : $(this).height(),
            'top'       : txtOffset.top - divOffset.top,
            'left'      : txtOffset.left - divOffset.left,
            'rotation'  : '0',
            'colour'    : $(this).css("color"),
            'size'      : $(this).css("font-size"),
            'bold'      : $(this).css("font-weight"),
            'underline' : $(this).css("text-decoration"),
            'align'     : $(this).css("text-align"),
            'font'      : $(this).css("font-family"),
            'text'      : $(this).val() 
        };
        data.textareas.push(newObject);
        });
    }

Answer 1

问题是您传递给 each 的函数只能得到 i=0。

您可以通过这样做来解决这个问题(未经测试，但这是标准方法):

function mk_add_text_area(data, page_id, page) {
    return function(elem) {
        var txtOffset = $(elem).offset();
        var divOffset = $("#" + page_id).offset();

        var newObject = { 
            'page'      : page,
            'id'        : $(elem).attr('id'),
            'src'       : $(elem).attr('src'),
            'width'     : $(elem).width(),
            'height'    : $(elem).height(),
            'top'       : txtOffset.top - divOffset.top,
            'left'      : txtOffset.left - divOffset.left,
            'rotation'  : '0',
            'colour'    : $(elem).css("color"),
            'size'      : $(elem).css("font-size"),
            'bold'      : $(elem).css("font-weight"),
            'underline' : $(elem).css("text-decoration"),
            'align'     : $(elem).css("text-align"),
            'font'      : $(elem).css("font-family"),
            'text'      : $(elem).val() 
        };
        data.textareas.push(newObject);
    }
}

然后稍后...

    //Get each textarea properties and encode to json
    $("#" + pageID[i] + " textarea").each(mk_add_text_area(data, pageID[i], pages[i]));