我是一個完整的初學者。
我正在嘗試實作兩個一鍵更改顏色(綠色到藍色)的按鈕(一旦實作完成,將其集成到實際網站中)。
按鈕需要執行以下操作:
兩個按鈕最初都是綠色的。單擊按鈕后,它應該將其顏色更改為藍色。
在第二次單擊同一個按鈕后,它應該恢復到原來的顏色,即綠色。
兩個按鈕中只有一個按鈕一次可以是藍色的。這意味著一旦用戶在單擊按鈕 1 后單擊按鈕 2,按鈕 1 應該變回綠色,按鈕 2 變回藍色。
到目前為止,我可以實作第一個和第三個,但不能實作中間的。
以下是它的必要代碼:
$(document).ready(function () {
$('#btn1').click(function(){
$('.btn').css('background-color', 'green');
$(this).css('background-color', 'blue');
})
$('#btn2').click(function(){
$('.btn').css('background-color', 'green');
$(this).css('background-color', 'blue');
})
});
.btn {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles.css">
<title>Document</title>
</head>
<body>
<button id = "btn1" class = "btn">Button</button>
<button id = "btn2" class = "btn">Button</button>
<!--<button id = "btn3" class = "btn" onclick="changeColor()">Button</button>
<button id = "btn4" class = "btn" onclick="changeColor()">Button</button> -->
<script src="/jquery-3.6.1.min.js"></script>
<script src="/index.js"></script>
</body>
</html>
uj5u.com熱心網友回復:
要執行您需要的操作,您可以在單擊的元素上切換一個類,將其背景設定為藍色。同時這個類將從所有其他按鈕中洗掉。
代碼也可以通過使用系結到所有.btn
元素的單個事件處理程式來簡化,而不是為每個元素單獨處理id
。
jQuery($ => {
let $btns = $('.btn').on('click', e => {
let $btn = $(e.target).toggleClass('clicked');
$btns.not($btn).removeClass('clicked');
});
});
.btn {
background-color: green;
}
.btn.clicked {
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">Button</button>
<button class="btn">Button</button>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/504664.html
標籤:javascript html jQuery css
上一篇:OpenHarmony3.0如何輕松連接華為云IoT設備接入平臺?
下一篇:如何在減少陣列物件之前使用映射