如何啓用一個功能，只有在點擊一個特定的條件

Question

嗨，那裏我有3個按鈕叫1.ADD，2.EDIT，3.DELETE .....和地圖id = comp_map ...我是使用開放街道地圖....

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

所以，你需要跟蹤應用程序的狀態，/按鈕，以便在地圖上點擊，你可以處理的相互作用不同，具體取決於該州：

在您的JS

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

然後在您要選擇的操作你的HTML數據集的屬性（你也可以設置一個selected類上點擊，顯示當前的動作：

<button data-action="add">Add</button> 
<button data-action="edit">Edit</button> 
<button data-action="delete">Delete</button>