순차적 클릭을 추적하고 사용하기위한 접근법

Question

두 번째 dom 요소 사이의 관계를 정의하고 싶습니다. 두 번째 요소를 클릭 한 다음 첫 번째 요소를 클릭하여 노드 사이에 선을 그립니다. 다음은 나의 접근법이다. 나는 그것이 특히 우아하거나 깨끗하다고 ​​생각하지 않습니다. 이 작업을 수행하는 더 좋은 방법이 있습니까?

$(function() { 

    var State = { 
     initialClick: false, // tracks clicks status for drawing lines 
     initialID: undefined // remember data gotten from the first click 
    }; 

    ... 

    $map.on('click', '.node', function() { 

    var $this = $(this), 
     currentID = $this.attr('data-id'); 

    if (State.initialClick) { 
     if (State.initialID === currentID) { 
      // process first click 
     } else { 
      // process second click 
     } 

     resetClickTracking(); 
    } else { 
     setState(currentID); 
    } 
    }); 

    ... 


    function setState(id) { 
    State.initialClick = true; 
    State.initialID = id; 
    } 

    function resetState() { 
    State.initialClick = false; 
    State.initialID = undefined; 
    } 

}); 

Answer 1

아마 위임 패턴 갈 것

:

var lastNodeClicked = null; 

$map.on('click', '.node', function() { 
    if (lastNodeClicked && lastNodeClicked !== this) { 
     // draw line 
     lastNodeClicked = null; // reset 
    } else { 
     lastNodeClicked = this; 
    } 
}); 

대신 마지막으로 클릭 된 노드를 재설정, 당신은 또한 무조건 클릭 노드를 업데이트 할 수 있습니다; 그런 식으로 적은 클릭으로 선을 그릴 수 있습니다 .-)