참조 오류 : 변수가 정의되지 않았습니다.

Question

"nthchild"라는 변수가 있습니다. var nthchild = ($(ui.selected).index() + 1); 이렇게하면 클래스가 선택된 목록 항목의 n 번째 자식이됩니다. 나는 심지어 콘솔에 로그인하고 잘 작동합니다. 그러나이 변수를 사용하려고 시도하지만 작동하지 않습니다.

$("section:nth-child(" + nthchild + ")").style.marginTop = "200px"; 

그래서 섹션에 200px의 여백이 있어야합니다. 그러나 콘솔은 당신이 그것을 사용하려고 위치의 범위를 벗어난 nthchild을 정의 때문에 문제는이 codepen

$(function() { 
    $("#selectable").selectable(); 
}); 

$(function() { 
    $("#selectable").selectable({ 
     selected: function(event, ui) { 
      var nthchild = ($(ui.selected).index() + 1); 
      console.log(nthchild); 
     } 
    }); 
}); 

$("section:nth-child(" + nthchild + ")").style.marginTop = "200px"; 

Answer 1

에 나에게 오류

Uncaught ReferenceError: nthchild is not defined

당신은 내 코드를 찾을 수 있습니다을주고있다. 이 위치를 수정하려면 선택기를 selected 콜백 내에 넣고 selectable이 업데이트 될 때 실행되도록합니다.

또한 .style.marginTop은 jQuery 객체에서 사용할 수없는 기본 요소의 속성입니다. 대신 css() 메서드를 사용하거나 더 나은 방법으로 스타일을 외부 스타일 시트의 규칙에 넣고 addClass()을 사용하십시오. 이것을 시도하십시오 :

$(function() { 
    $("#selectable").selectable(); 

    $("#selectable").selectable({ 
     selected: function(event, ui) { 
      var nthchild = ($(ui.selected).index() + 1); 
      $("section:nth-child(" + nthchild + ")").css('marginTop', '200px'); 
     } 
    }); 
});