특정 조건을 클릭 할 때만 기능을 활성화하는 방법

Question

안녕하세요, 1.ADD, 2.EDIT, 3.DELETE ..... 및 id = comp_map ...이라는 맵이 3 개 있습니다.

function addComp() { 

    $("#comp_map").click(function() { 
      if (event.type !== 'mousemove') { 
       var containerPoint = comp_map.mouseEventToContainerPoint(event), 
       layerPoint = comp_map.containerPointToLayerPoint(containerPoint), 
       latlng = comp_map.layerPointToLatLng(layerPoint)    
       alert("Marker Location: "+latlng); 
      } 
    }); 


} 

    function editComp() { 
     // disable the map click 
    } 

    function delComp() { 
     // disable the map click 
    } 

.... 내 질문을 열기 거리지도를 사용하여 내가 $("#comp_map").click이 추가 버튼을 클릭 한 경우에만 작동 할 것입니다 ...하지만 편집과 같은 다른 버튼이 클릭 할 삭제할 때이 기능이 작동하지합니다 .. . 이것이 올바른 방법입니다. 또는 제 접근법이 잘못되어 있으면 제게 ... 고맙습니다. ...!

Answer 1

그래서 당신은 응용 프로그램의 상태를 추적 할 필요가/버튼 그래서지도는 그 상태에 따라 다르게 상호 작용을 처리 할 수 ​​클릭 할 때 :

$(function() { 
    //set default action to add. If no default set action = false 
    var action = 'add'; 
    //Bind to button clicks and update stored state 
    $('body').on('click', 'button', function(e){ 
    var newAction = $(e.target).data('action'); 
    if ($(e.target).data('action')) { 
     action = newAction; 
    } 
    }); 
    //bind to map clicks and handle based on current action state 
    $("#comp_map").click(function(e) { 
    //you might want this conditional in your addComp() fn depending on what you need in editComp()/delComp() 
    if (e.type !== 'mousemove') { 
     e.preventDefault(); 
     switch (action) { 
     case "add": 
      addComp(e); 
      break; 
     case "edit": 
      editComp(e); 
      break; 
     case "delete": 
      delComp(e); 
      break; 
     default: 
      return false 
      break; 
     } 
    } 
    }) 
    function addComp(e) { 
     var containerPoint = comp_map.mouseEventToContainerPoint(event), 
     layerPoint = comp_map.containerPointToLayerPoint(containerPoint), 
     latlng = comp_map.layerPointToLatLng(layerPoint)    
     alert("Marker Location: "+latlng); 
    } 
    function editComp(e) { 
     // disable the map click 
    } 
    function delComp(e) { 
     // disable the map click 
    } 
}); 

그런 다음에 JS에서

선택한 작업에 대한 HTML 데이터 속성을 설정합니다 (클릭시 현재 작업을 표시하기 위해 selected 클래스를 설정할 수도 있습니다).