[英]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.