单击其他按钮时如何删除 jQuery .css()？
[英]How can I remove the jQuery .css() when clicking other button?
问题描述
In this jQuery switch, I'm trying to make the button that is currently clicked go back to its original state when the other button is clicked.
在这个 jQuery 开关中，我试图让当前单击的按钮在单击另一个按钮时返回其原始状态。 Also id like the off button to be clicked first automatically when the page is loaded.也喜欢在页面加载时首先自动点击关闭按钮。 I've tried many codes but cant seem to get it to work.我已经尝试了很多代码，但似乎无法让它工作。
HTML: 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: 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: 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);
});
});
4 个解决方案
解决方案1
4 2017-07-03 23:44:52
You can do it easily using classes and Jquery.您可以使用类和 Jquery 轻松完成。
Create a new class for your "on" state.为您的“开启”状态创建一个新类。
.on {
background-color: #85c452;
color: white;
transition: all 0.2s ease;
}
Then change your click handlers to toggle this class on and off instead of setting the specific CSS styles.然后更改您的点击处理程序以打开和关闭此类，而不是设置特定的 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");
});
});
解决方案2
1 已采纳 2017-07-03 23:39:15
When a button is clicked, you can turn the other button off by setting the CSS properties for that button to inherit .单击一个按钮时，您可以通过将该按钮的 CSS 属性设置为inherit来关闭另一个按钮。 This resets the properties to their default.这会将属性重置为其默认值。 You can target them with $('#darkmodeoff') and $('#darkmodeon') , just like you are using $(this) .您可以使用$('#darkmodeoff')和$('#darkmodeon')来定位它们，就像使用$(this) 。
To set the Off button to be selected by default, all you have to do is apply the styles to it in $(document.ready) .要将Off按钮设置为默认选中，您只需在$(document.ready)应用样式即可。 I've gone with $('#darkmodeoff')[0].style.backgroundColor and $('#darkmodeoff')[0].style.color for this. $('#darkmodeoff')[0].style.backgroundColor我使用了$('#darkmodeoff')[0].style.backgroundColor和$('#darkmodeoff')[0].style.color 。
Personally, I'd also recommend adding cursor: pointer to the buttons to appear as though you're actually clicking on them, and outline: none to button:hover to remove the blue border that gets generated by default.就我个人而言，我还建议添加cursor: pointer按钮的cursor: pointer ，使其看起来好像您实际上是在单击它们，并将outline: none到button:hover以删除默认生成的蓝色边框。 I've added these to the snippet :)我已将这些添加到代码段中:)
$(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>
Hope this helps!希望这有帮助！ :) :)
解决方案3
1 2017-07-03 23:40:21
Remove $(this).off('click',darkon);删除$(this).off('click',darkon); and instead add $(darkon).trigger('click');而是添加$(darkon).trigger('click'); to the start of your darkoff event handler and $(darkoff).trigger('click');到您的darkoff事件处理程序和$(darkoff).trigger('click'); to the start of your darkon event handler.到你的darkon事件处理程序的开始。
Before you close the darkoff event handler, add this }).trigger('click');在关闭darkoff事件处理程序之前，添加此}).trigger('click');
I would edit your original code, but I'm on my phone at the moment.我会编辑您的原始代码，但目前我正在使用手机。
解决方案4
1 2017-07-03 23:43:26
- If you want to turn of the event, then you will have to pass in the handler as the argument to the click event.如果要关闭该事件，则必须将处理程序作为参数传递给 click 事件。
- Instead of adding CSS on the fly, use a class to target the state, which is cleaner.不是即时添加 CSS，而是使用类来定位状态，这样更简洁。
- To invoke the
handler, on page load, trigger the click event after the handler is bound.要调用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.