javascript函数中的特定行不起作用

我今天晚上才让这个功能开始工作。然而，经过几次小的编辑，if/else的另一部分被删除后，它的一部分神奇地停止了工作

json请求的回调函数中的四个for循环都会执行，但实际上没有进行任何DOM操作。我已经三次检查了是否存在适当的DOM元素来实现这一点。警报将在所有这些系统中发出。只有jQuery行失败了

我已经尝试将相关变量放入控制台，并手动迭代数字以模拟循环。这个很好用。我还使用了警报来显示循环中变量的顺序，这些都正常工作

我很困惑

function drawPreview() {
    var $preview = $('#preview');
    $preview.remove();
    $('#general_preview').remove();
    try {
        activecell.location;
    }
    catch (error) {
        $('#active_cell').clone().attr('id','general_preview').appendTo('#win_preview');
        return;
    }
    if (activecell.location.match(/^\d+_\d+$/)!==null) {
        var x = parseInt(activecell.location.slice(0,activecell.location.indexOf("_")));
        var y = parseInt(activecell.location.slice(activecell.location.indexOf("_")+1));
        var area = "x"+activearea.join("x")+"x";
        $('#win_preview').append($('<div id="preview"><div><div></div><div></div><div></div></div><div><div></div><div></div><div></div></div><div><div></div><div></div><div></div></div></div>'));
        var i = y-1;
        var j = x-1;
        function loadCell() {
            var exp = new RegExp("x"+i+"_"+j+"x","g");
            if (area.match(exp)) {
                if (i==y&&j==x) {
                    $('#active_cell').clone().children().unwrap().appendTo($preview.children().eq(1).children().eq(1));
                    ++j;
                    loadCell();
                }
                else {
                    var jqxhr = $.getJSON('data/areas/'+$('#select_area').val()+'/'+x+"_"+y+'.json', function(data) {
                        var tmp = data;
                        for (var l=0; l<9; ++l) {
                            $preview.children().eq(i-y+1).children().eq(j-x+1).append('<div></div>');
                        }
                        for (var l=0; l<9; ++l) {
                            $preview.children().eq(i-y+1).children().eq(j-x+1).children().append('<div></div>');
                        }
                        for (var l = 0; l < 9; ++l) {
                            for (var m = 0; m < 9; ++m) {
                                $preview.children().eq(i-y+1).children().eq(j-x+1).children().eq(l).children().eq(m).attr("style","background: #"+tmp.p.c[tmp.c[l][m]-1]+" url(textures/terrain/"+tmp.p.t[tmp.t[l][m]-1]+".png) bottom center no-repeat");
                            }
                        }
                        if (i==y+1&&j==x+1) {
                            return;
                        }
                        else if (j==x+1) {
                            ++i;
                            j = x-1;
                            loadCell();
                        }
                        else {
                            ++j;
                            loadCell();
                        }
                    })
                        .error(function() { alert("There was an error loading the data. The data may be invalid or you may be looking for a file that does not exist."); })
                }
            }
            else {
                if (i==y+1&&j==x+1) {
                    return;
                }
                else if (j==x+1) {
                    ++i;
                    j = x-1;
                    loadCell();
                }
                else {
                    ++j;
                    loadCell();
                }
            }
        }
        loadCell();
    }
}

函数drawPreview（）{
变量$preview=$（“#preview”）；
$preview.remove（）；
$（“#常规预览”）.remove（）；
试一试{
活性细胞位置；
}
捕获（错误）{
$（“#活动#单元”）.clone（）.attr（'id'，'general#u preview'）。appendTo（'win#u preview'）；
返回；
}
if（activecell.location.match（/^\d+\d+$/）！==null）{
var x=parseInt（activecell.location.slice（0，activecell.location.indexOf（“”））；
var y=parseInt（activecell.location.slice（activecell.location.indexOf（“”）+1））；
var area=“x”+activearea.join（“x”）+“x”；
$（'win#u preview'）。追加（$（''）；
var i=y-1；
var j=x-1；
函数loadCell（）{
var exp=新的RegExp（“x”+i+“”+j+“x”，“g”）；
if（面积匹配（经验））{
如果（i==y&&j==x）{
$（“#活动单元格”）.clone（）.children（）.unwrap（）.appendTo（$preview.children（）.eq（1）.children（）.eq（1））；
++j；
称重传感器（）；
}
否则{
var jqxhr=$.getJSON（'data/area/'+$（'select_area'））.val（）+'/'+x+“'+y+'.json'，函数（数据）{
var tmp=数据；
对于（var l=0；l在开始时，您称之为

var $preview = $('#preview');

然后，在第一个
if
分支中：

$('#win_preview').append($('<div id="preview"><div...

您正在尝试访问不再存在的元素。您需要获取对刚刚附加的
#preview
的新引用。可能在该行之后添加大量的
附件：）

编辑：

另外，我建议您使用一些类选择器，而不是依赖于确切的DOM树结构（使用大量的
eq（）
）。如果您希望以某种方式更新标记，这可能会在将来为您节省一些时间。此外，一旦您开始使用此样式，您可以将这些选择器作为CSS样式的副作用，因此为什么不立即使用它们呢

另一件事：如果代码变得如此复杂且可读性不强，您可以尝试进行一些调试：

for (var l=0; l<9; ++l) {
    $preview.children().eq(i-y+1).children().eq(j-x+1).append('<div></div>');
}

for（var l=0；l在开始时，您调用这个

var $preview = $('#preview');

然后，在第一个
if
分支中：

$('#win_preview').append($('<div id="preview"><div...

您正在尝试访问不再存在的元素。您需要获取对刚刚附加的
#preview
的新引用。可能在该行之后添加大量的
附件：）

编辑：

另外，我建议您使用一些类选择器，而不是依赖于确切的DOM树结构（使用大量的
eq（）
）。如果您希望以某种方式更新标记，这可能会在将来为您节省一些时间。此外，一旦您开始使用此样式，您可以将这些选择器作为CSS样式的副作用，因此为什么不立即使用它们呢

另一件事：如果代码变得如此复杂且可读性不强，您可以尝试进行一些调试：

for (var l=0; l<9; ++l) {
    $preview.children().eq(i-y+1).children().eq(j-x+1).append('<div></div>');
}

for（var l=0；l我已经做了一个相当标准的重构，以减少嵌套if语句的数量（这是逻辑错误和混乱的常见滋生地）。我鼓励您发布一些测试数据（如果您愿意，可以使用fixture）一段有效的dom和一个单元格数据样本就足够了

function drawPreview() {
    var $preview = $('#preview'),
        x, y, area, i, j;

    function repeat( text, count ){
        var i=0, out = '';
        for( ; i++ < count ; ) {
            out += text;
        }
        return out;
    }

    $preview.remove();
    $('#general_preview').remove();
    try {
        activecell.location;
    }
    catch (error) {
        $('#active_cell').clone().attr('id','general_preview').appendTo('#win_preview');
        return;
    }
    if (activecell.location.match(/^\d+_\d+$/) === null ){
        return;
    }
    x = parseInt(activecell.location.slice(0,activecell.location.indexOf("_")), 10);
    y = parseInt(activecell.location.slice(activecell.location.indexOf("_")+1), 10);
    area = "x"+activearea.join("x")+"x";
    $('#win_preview').append($('<div id="preview"><div>' + repeat('<div>' + repeat('<div></div>', 4) + '</div>', 3) + '</div></div>'));
    i = y-1;
    j = x-1;
    function loadCell() {
        var exp = new RegExp("x"+i+"_"+j+"x","g"),
            sel_area;

        if (! area.match(exp)){
            if (i==y+1&&j==x+1) {
                return;
            }
            else if (j==x+1) {
                ++i;
                j = x-1;
                loadCell();
            }
            else {
                ++j;
                loadCell();
            }
            return;
        }
        if (i==y&&j==x) {
            $('#active_cell').clone()
                .children()
                .unwrap()
                .appendTo($preview.children()
                                .eq(1)
                                .children()
                                .eq(1)
                );
            ++j;
            loadCell();
            return;
        }
        var sel_area = $('#select_area').val();
        var jqxhr = $.getJSON('data/areas/'+ sel_area +'/'+x+"_"+y+'.json', function(data) {
            var tmp = data, l = 0, m = 0;
            for ( l=0; l<9; ++l ) {
                $preview.children()
                        .eq(i-y+1)
                        .children()
                        .eq(j-x+1)
                        .append('<div></div>');
            }
            for ( l=0; l<9; ++l) {
                $preview.children()
                        .eq(i-y+1)
                        .children()
                        .eq(j-x+1)
                        .children()
                        .append('<div></div>');
            }
            for ( l = 0; l < 9; ++l) {
                for ( m = 0; m < 9; ++m) {
                    $preview.children()
                            .eq(i-y+1)
                            .children()
                            .eq(j-x+1)
                            .children()
                            .eq(l)
                            .children()
                            .eq(m)
                            .css({background: "#"+tmp.p.c[tmp.c[l][m]-1]+" url(textures/terrain/"+tmp.p.t[tmp.t[l][m]-1]+".png) bottom center no-repeat"});
                }
            }
            if (i==y+1&&j==x+1) {
                return;
            }
            else if (j==x+1) {
                ++i;
                j = x-1;
                loadCell();
                return;
            }
            ++j;
            loadCell();
            return;
        }).error(function() { alert("There was an error loading the data. The data may be invalid or you may be looking for a file that does not exist."); });
    }
    loadCell();
}

函数drawPreview（）{
var$preview=$（“#preview”），
x、 y，面积，i，j；
函数重复（文本、计数）{
变量i=0，out=''；
对于（；i++对于（l=0；l我已经做了一个相当标准的重构来减少数量