Question

我正在尝试将切换功能应用到我正在处理的程序中。具体而言，用户单击按钮时有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();
        }
}

非常感谢任何帮助。

Answer 1

我看到你的代码包含'$'符号，所以我在回复中使用了jQuery。它还假设我们只关心另一个工具当前是否“开启”。所以我的回答中的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;
}

切换按钮状态

1 个答案: