토글 단추 상태

Question

작업중인 프로그램에 토글 기능을 구현하려고 시도하고 있습니다. 특히, 사용자가 단추를 클릭 할 때 가능한 세 가지 시나리오가 있습니다.

1. 다른 도구가 현재 활성화되어 있지 않을 때 도구가 클릭되었습니다. 다른 도구는
2. 같은 도구/오프

나는 문제가이 구현을 데 그것을에 전환을 클릭 현재 활성화되어있는 동안

도구를 클릭했습니다. 여기까지 내 코드가 있습니다 :

var toolState = { 
    img_draw_point: false, 
    img_draw_line: false, 
    img_draw_rectangle: false, 
    img_draw_ellipse: false, 
    img_draw_FreehandPolygon: false, 
    img_draw_FreehandPolyline: false, 
    img_draw_text: false, 
    img_draw_eraser: false, 
}; 

var lastActiveTool; 

on(dom.byId("div-tools-draw"), "click", function (evt) { 
     function disableActiveCSS() { 
      for (var property in toolState) { 

       $("img#" + property + ".k-button.single").removeClass("buttonSelected"); 
       $("img#" + property + ".k-button.single").removeClass("buttonHoverState"); 
      } 
     } 

     function enableCSS() { 
      $("img#" + evt.target.id + ".k-button.single").addClass("buttonSelected"); 
      $("img#" + evt.target.id + ".k-button.single").addClass("buttonHoverState"); 
     } 

     toolState[evt.target.id] = !toolState[evt.target.id]; 
     if (toolState[evt.target.id] == toolState[lastActiveTool]) { 
      toolState[lastActiveTool] = false; 
     } 

     disableActiveCSS(); 
     enableCSS(); 

     if (evt.target.id == lastActiveTool) { 
      disableActiveCSS(); 
     } 
} 

어떤 도움을 주시면 감사하겠습니다.

Answer 1

코드에 '$'표기법이 포함되어 있으므로 응답에 jQuery를 사용했습니다. 또한 다른 도구가 현재 "켜짐"상태인지 여부 만 고려한다고 가정합니다. 따라서 내 대답의 3 가지 옵션은 다음과 같습니다.

1. 도구가 켜져 있지 않으면 선택한 도구를 켭니다.
2. 현재 도구를 끄고 선택한 도구를 켜십시오.
3. 현재 켜져있는 경우 현재 도구를 끕니다.

var lastActiveTool = false; 

$.click("#div-tools-draw", function(evt) { 
    // Disable Active CSS 
    $("img.k-button.single").removeClass("buttonSelected").removeClass("buttonHoverState"); 

    if (!lastActiveTool) { 
    activateTool(evt.target.id); 
    } else if (evt.target.id == lastActiveTool) { 
    sameToolToggle(evt.target.id); 
    } else { 
    otherToolToggle(evt.target.id); 
    } 

}; 

var activateTool = function (id) { 
    $("img#" + id + ".k-button.single").addClass("buttonSelected")addClass("buttonHoverState"); 
    lastActiveTool = evt.target.id; 
}; 

var otherToolToggle = function(id) { 
    $("img#" + id + ".k-button.single").addClass("buttonSelected")addClass("buttonHoverState"); 
    lastActiveTool = evt.target.id; 
    // Whatever else you need to do to toggle between tools 
} 

// Only gets called when the same tool is currently toggled ON 
var sameToolToggle = function(id) { 
    lastActiveTool = false; 
}