切换按钮状态

Toggling Button States

本文关键字：状态 按钮      更新时间：2023-09-26

我正试图在我正在开发的程序中实现切换功能。具体来说，当用户单击按钮时，有三种可能的情况。

  1. 当前没有其他工具处于活动状态时单击了工具
  2. 在另一个工具当前处于活动状态时单击了该工具
  3. 单击相同的工具以打开/关闭它

我在实现这一点时遇到了困难。这是我到目前为止的代码：

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

如有任何帮助，我们将不胜感激。

我看到您的代码包含'$'表示法，所以我在响应中使用了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;
}
相关文章：