如何在單擊其他按鈕時刪除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（）？

回答

相關問題