javascript 함수의 특정 줄이 작동하지 않습니다.

Question

방금이 기능이 작동했습니다. 그러나 if/else의 다른 부분을 가져 오는 몇 가지 사소한 편집을 마친 후 일부는 마술처럼 작동하지 않습니다.

json 요청의 콜백 함수에서 네 개의 for 루프가 모두 실행되지만 실제로 DOM 조작이 수행되지 않습니다. 나는 이것이 발생하기 위해 적절한 DOM 요소가 존재 하는지를 세 번 확인했다. 모든 사람들에게 경고가 발령됩니다. jQuery 라인 만 실패합니다.

관련 변수를 콘솔에 넣고 수동으로 루프를 시뮬레이트하기 위해 숫자를 반복 해 보았습니다. 이것은 잘 작동합니다. 루프의 변수 시퀀스를 표시하기 위해 경고를 사용했는데 이것들은 모두 올바르게 작동합니다.

나는 당황하고 있습니다. 콜백에서,

을 수행하여

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

확인하지만, : 처음에

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

Answer 1

, 첫 번째 if 지점에서,이

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

를 호출하고

$preview.children().eq(i-y+1).children().... 

더 이상 존재하지 않는 요소에 액세스하려고합니다. 그냥 첨부 된 #preview에 대한 새로운 참조가 필요합니다. <div></div>의 톤과 그 선이 :)

을 추가 어쩌면 후

는 편집 : 또한

, 나는 당신이 eq()을 많이 사용 (대신 정확한 DOM 트리 구조에 의존, 클래스 선택기 조금 사용하는 것이 좋습니다 것). 마크 업을 어떻게 든 업데이트하려는 경우 나중에 시간을 절약 할 수 있습니다. 또한 일단이 스타일을 사용하게되면 CSS 선택 스타일의 부작용으로 이러한 선택기를 사용할 수 있으므로 왜 즉시 사용하지 않을까요?

또 다른 한가지 : 코드를 훨씬 읽을이 복잡하고하지를 얻을 경우, 디버깅의 비트와 함께 자신을 도우려고 수있는 것은 :

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

도 할 수

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

당신에게

쓴 수있다 ' 콘솔에 (firefox + firebug 디버깅을 가정 할 때) 정확히 어디에 추가하려고하는지 볼 수 있습니다. 이것의 추가 된 이점은 코드를 최적화하는 것으로 전달된다는 것입니다. 타겟을 한 번 추가 한 다음 루프에 추가하는 것입니다. 이전 변형은 루프에서 대상을 가져오고 추가하는 작업을 수행합니다.

Answer 2

중첩 된 if 문 수를 줄이기 위해 표준 리팩터를 수행했습니다 (이것은 논리 오류 및 혼동에 대한 공통적 인 기반입니다). 이 작업을 실제로 수행하기를 기대하는 데이터의 비트 (테스트 데이터)를 게시하는 것이 좋습니다. 유효한 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(); 
}