[英]How can I remove the jQuery .css() when clicking other button?
在这个 jQuery 开关中，我试图让当前单击的按钮在单击另一个按钮时返回其原始状态。 也喜欢在页面加载时首先自动点击关闭按钮。 我已经尝试了很多代码，但似乎无法让它工作。
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);
});
});
您可以使用类和 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");
});
});
单击一个按钮时，您可以通过将该按钮的 CSS 属性设置为inherit来关闭另一个按钮。 这会将属性重置为其默认值。 您可以使用$('#darkmodeoff')和$('#darkmodeon')来定位它们，就像使用$(this) 。
要将Off按钮设置为默认选中，您只需在$(document.ready)应用样式即可。 $('#darkmodeoff')[0].style.backgroundColor我使用了$('#darkmodeoff')[0].style.backgroundColor和$('#darkmodeoff')[0].style.color 。
就我个人而言，我还建议添加cursor: pointer按钮的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>
希望这有帮助！ :)
删除$(this).off('click',darkon); 而是添加$(darkon).trigger('click'); 到您的darkoff事件处理程序和$(darkoff).trigger('click'); 到你的darkon事件处理程序的开始。
在关闭darkoff事件处理程序之前，添加此}).trigger('click');
我会编辑您的原始代码，但目前我正在使用手机。
handler ，在页面加载时，在绑定处理程序后触发 click 事件。 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>
单击jQuery的按钮时如何运行CSS动画？
[英]How can I get my CSS animation to run when clicking the button by usng jQuery?
在 JQuery 中，如何仅通过单击按钮而不是整个元素来删除 li 元素？
[英]In JQuery how can I remove a li element by only clicking on the button and not the whole element?
单击删除按钮时如何删除localStorage中的项目
[英]How can you delete an item in localStorage when clicking a remove button
如何在单击按钮并按 Enter 时启动 jquery 功能
[英]How can I start a jquery function on clicking a button and on pressing enter
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.