我正在构建一个带有 4 个预设按钮和一个自定义范围输入的组件。我可以在单击按钮时切换按钮的活动状态，但我想在单击输入时从所有按钮中删除活动状态。我还想在单击输入内容时清除输入字段。
代码：
let btnContainer = document.getElementById("rc-button-bar");
let btns = btnContainer.getElementsByClassName("ce-button");
let input = document.getElementById("customPercent");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
(document.querySelector('.is-active')) ? document.querySelector('.is-active').classList.remove('is-active'): '';
this.classList.add('is-active');
});
}.btn-primary.ce-button {
width: 100%;
height: 48px;
padding: auto;
border: 4px solid #0079c1;
border-radius: 5px;
background: transparent;
color: #0079c1;
font-weight: bold;
cursor: pointer;
}
.btn-primary.ce-button:hover,
.btn-primary.ce-button:active {
background: #0079c1;
border-radius: 5px;
color: #ffffff;
font-weight: bold;
cursor: pointer !important;
}
.is-active {
background: #0079c1 !important;
border-radius: 5px !important;
color: #ffffff !important;
font-weight: bold !important;
}<div class="row selectors d-flex justify-content-center" id="rc-button-bar">
<div class="col-xs-6 col-sm-6 col-md-2 mb-2">
<button id="btn-25" class="btn-primary ce-button" data-value="25">25%</button>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 mb-2">
<button id="btn-50" class="btn-primary ce-button" data-value="50">50%</button>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 mb-2">
<button id="btn-85" class="btn-primary ce-button is-active" data-value="85">85%</button>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 mb-2">
<button id="btn-100" class="btn-primary ce-button" data-value="100">100%</button>
</div>
<div class="col-sm-12 col-md-2 mb-2 d-flex align-items-center">
<input id="customPercent" class="numbers" type="text" placeholder="ex: 80"></input> <span>%</span>
</div>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button and Input Interaction</title>
<style>
.btn-primary.ce-button {
width: 100%;
height: 48px;
padding: auto;
border: 4px solid #0079c1;
border-radius: 5px;
background: transparent;
color: #0079c1;
font-weight: bold;
cursor: pointer;
}
.btn-primary.ce-button:hover,
.btn-primary.ce-button:active {
background: #0079c1;
border-radius: 5px;
color: #ffffff;
font-weight: bold;
cursor: pointer !important;
}
.is-active {
background: #0079c1 !important;
border-radius: 5px !important;
color: #ffffff !important;
font-weight: bold !important;
}
</style>
</head>
<body>
<div class="row selectors d-flex justify-content-center" id="rc-button-bar">
<div class="col-xs-6 col-sm-6 col-md-2 mb-2">
<button id="btn-25" class="btn-primary ce-button" data-value="25">25%</button>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 mb-2">
<button id="btn-50" class="btn-primary ce-button" data-value="50">50%</button>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 mb-2">
<button id="btn-85" class="btn-primary ce-button is-active" data-value="85">85%</button>
</div>
<div class="col-xs-6 col-sm-6 col-md-2 mb-2">
<button id="btn-100" class="btn-primary ce-button" data-value="100">100%</button>
</div>
<div class="col-sm-12 col-md-2 mb-2 d-flex align-items-center">
<input id="customPercent" class="numbers" type="text" placeholder="ex: 80"></input> <span>%</span>
</div>
</div>
<script>
let btnContainer = document.getElementById("rc-button-bar");
let btns = btnContainer.getElementsByClassName("ce-button");
let input = document.getElementById("customPercent");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
let activeButton = document.querySelector('.is-active');
if (activeButton) {
activeButton.classList.remove('is-active');
}
this.classList.add('is-active');
});
}
input.addEventListener("focus", function() {
let activeButton = document.querySelector('.is-active');
if (activeButton) {
activeButton.classList.remove('is-active');
}
});
input.addEventListener("blur", function() {
this.value = '';
});
</script>
</body>
</html>
说明： 向按钮添加点击事件监听器：
循环遍历所有具有 ce-button 类的按钮。 单击按钮时，它会从当前活动按钮（如果有）中删除 is-active 类，并将 is-active 类添加到单击的按钮。 处理输入焦点：
输入字段添加事件监听器来处理焦点事件。 当输入字段获得焦点时，is-active 类将从当前活动按钮（如果有）中删除。 处理输入模糊：
在输入字段中添加事件监听器来处理模糊事件。 当输入字段失去焦点时，其值被清除。