个人中心
gpt4 book ai didi

javascript - 如何解除绑定(bind)此 .click 操作？

转载 作者：行者123 更新时间：2023-11-28 15:29:29 24 4
gpt4 key购买 nike

我正在尝试实现此开关功能，以便当已单击打开按钮并且用户单击关闭时，打开按钮 CSS 恢复正常。我还希望将开关设置为默认设置。我也尝试过，但没有成功。

HTML:

<!DOCTYPE HTML>
<html>

<head>

    <title>Toggleswitch</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src='script.js' type='text/javascript'></script>

</head>
<body>

    <div class="switch-container">
        <button id="darkmodeon">ON</button>
        <button id="darkmodeoff">OFF</button>

    </div>

</body>
</html>

CSS:

body{
    background-color: black;
}

.switch-container{
    display: flex;
    justify-content: space-between;
    background-color: white;
    border-radius: 50px;
    padding: 5px;
    width: 135px;

}

#darkmodeon{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: none;
    color: #a5a5a5;
    font-family:"calibri light";
    font-size: 15px;
    font-weight: bold;
    background-color: #e8e8e8;
}

#darkmodeoff{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: none;
    color: #a5a5a5;
    font-family:"calibri light";
    font-size: 15px;
    font-weight: bold;
    background-color: #e8e8e8;
}

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) 的替代品。要在任何元素上删除之前绑定(bind)到任何事件的任何处理程序，请使用:

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

例子:

var whatever = function(){
    // code here
};
$(selector).on('click', whatever); // or $(selector).click(handler);
$(selector).off('click', whatever);

虽然举例说明了如何解除绑定(bind)，但上面的例子并没有做太多，因为函数在绑定(bind)后立即解除绑定(bind)。通常，您会根据应用的逻辑解除绑定(bind)。

例如，如果您想在第一次click 之后取消绑定(bind)click，通常您会在绑定(bind)内使用.off()功能:

var whatever = function(){
  $(this).off('click', whatever);
  // code that only runs on first click.
};
$(selector).on('click', whatever); // or $(selector).click(handler);

至于你的例子，你为什么不在他们的 parent 身上切换一个类(class)？

$('.parent button').on('click', function(){
  $(this).closest('.parent').toggleClass('on');
})
/*.parent button, 
.parent.on button:first-child {
  display: none;
}
.parent button:first-child,
.parent.on button:last-child {
  display: inline;
}*/

/* if you don't want/like the animation, just use the simple `display` switch above */

.parent {
  position: relative;
  display: inline-block;
}
.parent button {
  transition: opacity .2s linear, transform .3s cubic-bezier(.4,0,.2,1);
}
.parent.on button:first-child {
  opacity: 0;
  transform: translateX(-100%);
}
.parent button:last-child {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateX(100%)
}
.parent button:first-child,
.parent.on button:last-child {
  opacity: 1;
  transform: translateX(0)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
  <button>On</button>
  <button>Off</button>
</div>

关于javascript - 如何解除绑定(bind)此 .click 操作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44893908/

24 4 0
文章推荐： javascript - 使用 HighCharts 在同一图表中显示多个饼图
文章推荐： html - 我的 CSS 代码布局有问题
文章推荐： javascript - javascript 中闭包的混淆
文章推荐： JavaFX ChoiceBox 上下文菜单位置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com