如何在单击其他按钮时删除jquery .css（）？

在这个jquery开关中，当试图使当前点击的按钮回到其原始状态时，点击另一个按钮。当页面被加载时，id也会像关闭按钮一样自动首先被点击。我已经尝试了很多代码，但似乎无法让它工作。如何在单击其他按钮时删除jquery .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="switchcontainer"> 
    <button id="darkmodeon">ON</button> 
    <button id="darkmodeoff">OFF</button> 
</div> 

</body> 
</html>

CSS：

body{ 
    background-color: black; 
} 

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

} 

button{ 
    width:50px; 
    height: 50px; 
    border: none; 
    border-radius: 50px; 
    background-color: #d8d8d8; 
    color: #777777; 
    font-family: 'calibri light'; 
    font-size: 17px; 
    font-weight: bold; 

}

JQUERY：

$(document).ready(function(){ 
    var darkon = '#darkmodeon'; 
    var darkoff = '#darkmodeoff'; 

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

    $(darkoff).click(function(){ 
     $(this).css({ 
      "background-color": "#85c452", 
      "color": "white", 
      "transition": "all 0.2s ease" 
     }); 

     $(this).off('click',darkon); 

    }); 

});

来源

2017-07-03 AbuN2286

当点击一个按钮，就可以通过设置CSS属性打开另一个按钮关闭该按钮到inherit。这会将属性重置为默认值。您可以使用$('#darkmodeoff')和$('#darkmodeon')作为目标，就像您使用$(this)一样。

若要将Off按钮设置为默认选择，您只需将样式应用到$(document.ready)即可。我已经用$('#darkmodeoff')[0].style.backgroundColor和$('#darkmodeoff')[0].style.color为此。

就我个人而言，我还建议将cursor: pointer添加到按钮以显示好像你实际上点击它们，outline: none到button:hover删除默认生成的蓝色边框。我已经添加了这些的片段:)

$(document).ready(function() { 
 
    var darkon = '#darkmodeon'; 
 
    var darkoff = '#darkmodeoff'; 
 
    
 
    // Set the off to clicked by default 
 
    $('#darkmodeoff')[0].style.backgroundColor = "#85c452"; 
 
    $('#darkmodeoff')[0].style.color = "white"; 
 

 
    $(darkon).click(function() { 
 
    $(this).css({ 
 
     "background-color": "#85c452", 
 
     "color": "white", 
 
     "transition": "all 0.2s ease" 
 
    }); 
 
    $('#darkmodeoff').css({ 
 
     "background-color": "inherit", 
 
     "color": "inherit", 
 
     "transition": "all 0.2s ease" 
 
    }); 
 
    }); 
 

 
    $(darkoff).click(function() { 
 
    $(this).css({ 
 
     "background-color": "#85c452", 
 
     "color": "white", 
 
     "transition": "all 0.2s ease" 
 
    }); 
 
    $('#darkmodeon').css({ 
 
     "background-color": "inherit", 
 
     "color": "inherit", 
 
     "transition": "all 0.2s ease" 
 
    }); 
 
    }); 
 

 
});

body { 
 
    background-color: black; 
 
} 
 

 
.switchcontainer { 
 
    background-color: white; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border-radius: 50px; 
 
    width: 125px; 
 
    padding: 5px; 
 
} 
 

 
button { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: none; 
 
    border-radius: 50px; 
 
    background-color: #d8d8d8; 
 
    color: #777777; 
 
    font-family: 'calibri light'; 
 
    font-size: 17px; 
 
    font-weight: bold; 
 
    cursor: pointer; /* ADDED */ 
 
} 
 

 
button:focus { 
 
    outline: none; /* ADDED */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="switchcontainer"> 
 
    <button id="darkmodeon">ON</button> 
 
    <button id="darkmodeoff">OFF</button> 
 
</div>

希望这有助于！ :)

来源

2017-07-03 23:39:15

非常感谢你这是完美的！ – AbuN2286

太棒了！很高兴听到这个解决方案似乎帮助你:) –

删除$(this).off('click',darkon);，而是添加$(darkon).trigger('click');您darkoff事件处理程序和$(darkoff).trigger('click');开始你darkon事件处理程序的开始。

之前关闭darkoff事件处理程序，添加此}).trigger('click');

我必须修改原来的代码，但是我我的手机上的时刻。

来源

2017-07-03 23:40:21 James

如果您想要关闭事件，那么您必须将处理程序作为参数传递给click事件。
而不是实时添加CSS，使用一个类来定位更清晰的状态。
要在页面加载时调用handler，绑定处理程序后触发单击事件。

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

 
// This is how you should be binding your click handler 
 
// to the button if you are planning to turn of the event 
 
// at a later stage. Since, the `off` method expects the same 
 
// function to be passed when you attach the event 
 
$(darkon).click(addActiveClass); 
 

 
$(darkoff).click(function(e) { 
 
    addActiveClass(e); 
 

 
    $(darkon).removeClass('on'); 
 
    
 
    $(darkon).off('click', addActiveClass); 
 

 
}); 
 

 
function addActiveClass(e) { 
 
    var $target = $(e.target); 
 
    
 
    $target.addClass('on'); 
 
} 
 

 
$(darkon).click();

body { 
 
    background-color: black; 
 
} 
 

 
.switchcontainer { 
 
    background-color: white; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border-radius: 50px; 
 
    width: 125px; 
 
    padding: 5px; 
 
} 
 

 
button { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: none; 
 
    border-radius: 50px; 
 
    background-color: #d8d8d8; 
 
    color: #777777; 
 
    font-family: 'calibri light'; 
 
    font-size: 17px; 
 
    font-weight: bold; 
 
} 
 

 
.on { 
 
    background-color: #85c452; 
 
    transition: all 0.2s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="switchcontainer"> 
 
    <button id="darkmodeon">ON</button> 
 
    <button id="darkmodeoff">OFF</button> 
 
</div>

来源

2017-07-03 23:43:26

您可以使用类和jQuery很容易做到这一点。

为您的“开启”状态创建一个新类。

.on { 
    background-color: #85c452; 
    color: white; 
    transition: all 0.2s ease; 
}

然后改变你的点击处理程序来开启和关闭这个类，而不是设置特定的CSS样式。

$(document).ready(function(){ 
    var darkon = '#darkmodeon'; 
    var darkoff = '#darkmodeoff'; 

    $(darkon).click(function(){ 
     $(this).addClass("on"); 
     $(darkoff).removeClass("on"); 
    }); 

    $(darkoff).click(function(){ 
     $(this).addClass("on"); 
     $(darkon).removeClass("on"); 
    }); 
});

来源

2017-07-03 23:44:52

如何在单击其他按钮时删除jquery .css（）？

回答

相关问题