Javascript 切换按钮状态

我正在尝试将切换功能实现到我正在处理的程序中。具体来说，当用户单击按钮时，有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个选项是：

如果未启用任何工具，则启用所选工具

关闭当前工具并打开选定工具

如果当前工具处于启用状态，请将其关闭

var lastActiveTool=false；
$。单击（#div tools draw），函数（evt）{
//禁用活动CSS
$（“img.k-button.single”）.removeClass（“buttonSelected”）.removeClass（“buttonHoverState”）；
如果（！lastActiveTool）{
活化乙醇（evt.target.id）；
}else if（evt.target.id==lastActiveTool）{
sametooltogle（evt.target.id）；
}否则{
其他工具日志（evt.target.id）；
}
};
var activateTool=功能（id）{
$（“img#“+id+”.k-button.single”）.addClass（“buttonSelected”）addClass（“buttonHoverState”）；
lastActiveTool=evt.target.id；
};
var othertooltogle=函数（id）{
$（“img#“+id+”.k-button.single”）.addClass（“buttonSelected”）addClass（“buttonHoverState”）；
lastActiveTool=evt.target.id；
//在工具之间切换还需要做什么
}
//仅在当前启用同一工具时调用
var sameToolToggle=函数（id）{
lastActiveTool=false；
}

on和object

dom

上的函数

是什么？这些只是jQuery的
on
方法和
文档
对象的别名吗？还有
byId
是getElementById的别名吗？忘了提到，按钮“click”事件由Dojo处理。这不是出于选择，而是由我们的客户设置的规范。非常感谢，这非常有帮助。