Javascript 如何解除此绑定。单击“操作”？

我试图使这个开关功能，以便当on按钮已经被点击，而用户点击off时，on按钮CSS恢复正常。我还希望开关已设置为默认值。我也试过，但运气不好

HTML:

jQuery：

$(document).ready(function(){

    var darkon = "#darkmodeon";
    var darkoff = "#darkmodeoff";

    $(darkon).click(function(){
        $(this).css({
            "background-color": "#66e86a",
            "color": "white" ,
            "transition": "all 0.3s ease"   
        });
    });

    $(darkoff).click(function(){
        $(this).css({
            "background-color": "#66e86a",
            "color": "white" ,
            "transition": "all 0.3s ease"   
        });
        $(this).unbind('click', darkon);
    });



});

.click（handler）

只是

.on（'click'，handler）

的代理。要删除以前绑定到任何事件的任何处理程序，请在任何元素上使用：

$(selector).off('eventName', handler)

例如：

var whatever=function（）{
//代码在这里
};
$（选择器）。在（'单击'，无论什么）；//或$（选择器）。单击（处理程序）；
$（选择器）.off（'click'，随便什么）；

在举例说明如何解除绑定时，上面的示例没有做多少工作，因为函数在绑定后立即解除绑定。通常，您会根据应用程序的逻辑解除绑定

例如，如果要在第一次

单击后取消绑定
单击
，通常在绑定函数中使用
.off（）
：

var whatever=function（）{
$（此）.off（'click'，随便什么）；
//仅在第一次单击时运行的代码。
};
$（选择器）。在（'单击'，无论什么）；//或$（选择器）。单击（处理程序）；


对于您的示例，为什么不在父类上切换一个类呢


$（'.parent按钮'）。在（'click'，function（）上{
$（this）.closest（'.parent'）.toggleClass（'on'）；
})
/*.parent按钮，
.parent.on按钮：第一个子项{
显示：无；
}
.父按钮：第一个子按钮，
.parent.on按钮：最后一个子项{
显示：内联；
}*/
/*如果您不想/不喜欢动画，只需使用上面简单的“显示”开关即可*/
.家长{
位置：相对位置；
显示：内联块；
}
.父按钮{
转换：不透明度.2s线性，转换.3s立方贝塞尔（.4,0,2,1）；
}
.parent.on按钮：第一个子项{
不透明度：0；
转化：translateX（-100%）；
}
.父按钮：最后一个子按钮{
位置：绝对位置；
左：0；
排名：0；
不透明度：0；
转换：translateX（100%）
}
.父按钮：第一个子按钮，
.parent.on按钮：最后一个子项{
不透明度：1；
转换：translateX（0）
}

在…上
关
解除绑定
已在许多版本中被弃用。使用
off
删除事件处理程序。我已将您的代码用于我的本地主机。该开关不能作为开关工作。我可以点击开和关，两个都变成绿色。你给了我使用复选框而不是按钮的想法，谢谢@AbuN2286，请注意，我对上面的切换示例做了一个小的补充。如果你要在生产中使用它，它需要。
$(document).ready(function(){

    var darkon = "#darkmodeon";
    var darkoff = "#darkmodeoff";

    $(darkon).click(function(){
        $(this).css({
            "background-color": "#66e86a",
            "color": "white" ,
            "transition": "all 0.3s ease"   
        });
    });

    $(darkoff).click(function(){
        $(this).css({
            "background-color": "#66e86a",
            "color": "white" ,
            "transition": "all 0.3s ease"   
        });
        $(this).unbind('click', darkon);
    });



});

$(selector).off('eventName', handler)