我需要一次只允許單擊一個按鈕。例如，如果用戶單擊 btn1，則其背景顏色會從透明變為綠色。然后如果用戶點擊 btn2，btn1 背景顏色應該從透明變為紅色，btn1 背景顏色應該從綠色變為透明。另外我需要切換兩個按鈕
<button class="" id="btn1" onclick="myFunction(1)">Upvote </button>
<button class=""id="btn2" onclick="myFunction(-1)">Down Vote</button>
<script>
function myFunction(str) {
var element = document.getElementById("btn1");
var element1 = document.getElementById("btn2");
if(str==1){
document.getElementById("btn2").style.backgroundColor ="";
element.classList.toggle("mystyle");
}else{
element1.classList.toggle("mystyle1");
document.getElementById("btn1").style.backgroundColor ="";
}
}
</script>
<style>
.mystyle {
background-color: green;
color: white;
}
.mystyle1 {
background-color: red;
color: white;
}
</style>
uj5u.com熱心網友回復：
您可以使用element.classList.remove()
function myFunction(str) {
var element = document.getElementById("btn1");
var element1 = document.getElementById("btn2");
if(str==1){
element1.classList.remove("mystyle1");
element.classList.toggle("mystyle");
}else{
element1.classList.toggle("mystyle1");
element.classList.remove("mystyle");
}
}.mystyle {
background-color: green;
color: white;
}
.mystyle1 {
background-color: red;
color: white;
}<button class="" id="btn1" onclick="myFunction(1)">Upvote </button>
<button class=""id="btn2" onclick="myFunction(-1)">Down Vote</button>uj5u.com熱心網友回復：
利用jQuery 的 toggleClass，您可以撰寫一個干凈的解決方案來動態更改按鈕的背景顏色。
var btnUp = $('#btn-up');
var btnDown = $('#btn-down');
btnUp.click(function() {
$(this).toggleClass('btn-green');
btnDown.removeClass('btn-red');
});
btnDown.click(function() {
$(this).toggleClass('btn-red');
btnUp.removeClass('btn-green');
});.btn {
background-color: transparent;
}
.btn-green {
background-color: green;
}
.btn-red {
background-color: red;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<button id="btn-up" class="btn">Up Vote</button>
<button id="btn-down" class="btn">Down Vote</button>uj5u.com熱心網友回復：
閱讀您的代碼后，我對您的 js 函式進行了一些更改，它將按照您的期望作業：
function myFunction(str) {
var element = document.getElementById("btn1");
var element1 = document.getElementById("btn2");
if(str==1){
element.classList.toggle("mystyle");
element1.className = '';
} else{
element1.classList.toggle("mystyle1");
element.className = '';
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/491144.html
標籤：javascript html jQuery css
上一篇：自定義Y軸標簽并在d3中打勾