노드의 setXY 함수가 0y로 xy 위치를 설정하지 않음

Question

div를 입력 상자 바로 옆에 표시해야하지만이 div는 여러 div에있는 입력 상자와 달리 본문 바로 아래에 있어야합니다.

그래서 나는 많은 입력을 가지고 있으며이 div 콘텐츠에 약간의 오류를 보여주고 싶습니다. 나는 블러에 입력 된 내용을 확인한 다음, 어떤 블러가 발생했는지에 상관없이이 입력 상자의 위치를 ​​취하고 div의 setXY 위치를 가져다가 숨김을 해제합니다.

코드 :

var input=Y.one("#input1"); 
var errorDiv=Y.one('#errorDiv'); 

input.on('blur',function(e){ 
    var xy=input.getXY(); 
    errorDiv.setXY([xy[0]+30,xy[1]]); 
    errorDiv.removeClass('hide'); 
}); 

내가 직면하고 문제는 setXY가 처음 작동하지 않는다는 것입니다. 두 번째로 포커스를 변경 한 후에야 setXY가 올바른 위치에 놓입니다. 디버깅하는 동안이 문 errorDiv.setXY([xy[0]+30,xy[1]]); 다음에 오류 div의 xy 위치는 여전히 0,0입니다.

누군가 내가 여기서 뭘 잘못하고 있는지 말해 줄 수 있습니까?

Answer 1

errorDiv의 모양을 처리하는 순서를 바꿔야한다고 생각합니다. 따라서 숨기기 해제 위치를 설정하는 대신 div를 숨김 해제 한 다음 위치를 변경하십시오. 이에

errorDiv.setXY([xy[0]+30,xy[1]]); 
    errorDiv.removeClass('hide'); 

:

단순히 이 변경합니다.

errorDiv.removeClass('hide'); 
    errorDiv.setXY([xy[0]+30,xy[1]]); 

이 나는이 변화를 보여주는 demo 만들었습니다.

내가 전에이 문제가 발생했고, 나는 그것으로 너무 깊이 탐구하지 않았기 때문에 나는 완전히가 ​​발생하는 이유를 확인 를 모르겠지만, 내 이론은 그것의 요소를 필요로 함께 할 수있는 뭔가가 있다는 것입니다 적절한 좌표 계산을 위해 먼저 눈에 보이십시오. 희망이 도움이됩니다.