【发布时间】：2021-05-10 10:45:52
【问题描述】：
我有 3 个表格，我在其中输入 type="radio" 来选择一个计划。我期望完成的是从这 3 个表单中单击任何计划的标签，使当前单击的标签目标无线电激活，并将“范围滑块”的位置移动到选择的必要计划。 我最大的问题是我不明白，如何将类添加到我会单击的当前项目并将其从所有其他项目中删除？请问有人可以提供线索吗？
这里是代码sn-p。
var selectPlanLabel = document.querySelectorAll('.select-plan__radio');
for (var i = 0; i < selectPlanLabel.length; i++) {
selectPlanLabel[i].addEventListener('click', changeRadio.bind(null, i));
}
function changeRadio(selected, e) {
var planLabelActive = document.querySelectorAll('.select-plan__label--active');
for (var i = 0; i < planLabelActive.length; i++) {
planLabelActive[i].classList.remove('select-plan__label--active');
}
e.target.classList.add('select-plan__label--active');
}.container {
max-width: 350px;
margin: 0 auto;
padding: 0 15px;
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.select-plan {
text-align: center;
margin-top: 80px;
}
.spacer {
width: 100%;
}
.spacer-gap--16 {
padding-bottom: 16px;
}
.spacer-gap--30 {
padding-bottom: 30px;
}
.select-plan__container {
display: flex;
justify-content: space-between;
position: relative;
}
.select-plan__radio, .select-plan__label {
display: block;
cursor: pointer;
}
.select-plan__label {
z-index: 10;
flex-grow: 1;
}
.select-plan__radio {
flex-shrink: 1;
}
.dimensional-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.select-plan__range-slider {
width: 100%;
position: absolute;
top: 30%;
height: 8px;
border-radius: 20px;
background: #fff;
box-shadow: inset 0px 0.820721px 3.28288px rgba(37, 71, 122, 0.25);
z-index: 1;
}
.select-plan__range-slider::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
display: block;
left: 0;
top: calc(30% - 10px);
border-radius: 50%;
background: #4376A6;
box-shadow: -0.820721px 0.820721px 1.64144px rgba(0, 0, 0, 0.25);
z-index: 1;
}<div class="container">
<form class="select-plan" action="">
<div class="select-plan__container">
<div class="select-plan__range-slider"></div>
<div class="dimensional-container">
<div class="spacer spacer-gap--30"></div>
<input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="one-month" id="select-month">
<label class="select-plan__label" for="select-month">1 month</label>
</div>
<div class="dimensional-container">
<div class="spacer spacer-gap--30"></div>
<input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="three-months" id="select-three-month" checked>
<label class="select-plan__label select-plan__label--active" for="select-three-month">3 month</label>
</div>
<div class="dimensional-container">
<div class="spacer spacer-gap--30"></div>
<input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="twelve-months" id="select-twelve-month">
<label class="select-plan__label" for="select-twelve-month">12 month</label>
</div>
</div>
<div class="spacer spacer-gap--16"></div>
<button class="select-plan__submit" type="submit">Try now</button>
</form>
<form class="select-plan" action="">
<div class="select-plan__container">
<div class="select-plan__range-slider"></div>
<div class="dimensional-container">
<div class="spacer spacer-gap--30"></div>
<input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="one-month" id="select-month">
<label class="select-plan__label" for="select-month">1 month</label>
</div>
<div class="dimensional-container">
<div class="spacer spacer-gap--30"></div>
<input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="three-months" id="select-three-month" checked>
<label class="select-plan__label select-plan__label--active" for="select-three-month">3 month</label>
</div>
<div class="dimensional-container">
<div class="spacer spacer-gap--30"></div>
<input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="twelve-months" id="select-twelve-month">
<label class="select-plan__label" for="select-twelve-month">12 month</label>
</div>
</div>
<div class="spacer spacer-gap--16"></div>
<button class="select-plan__submit" type="submit">Try now</button>
</form>
<form class="select-plan" action="">
<div class="select-plan__container">
<div class="select-plan__range-slider"></div>
<div class="dimensional-container">
<div class="spacer spacer-gap--30"></div>
<input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="one-month" id="select-month">
<label class="select-plan__label" for="select-month">1 month</label>
</div>
<div class="dimensional-container">
<div class="spacer spacer-gap--30"></div>
<input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="three-months" id="select-three-month" checked>
<label class="select-plan__label select-plan__label--active" for="select-three-month">3 month</label>
</div>
<div class="dimensional-container">
<div class="spacer spacer-gap--30"></div>
<input class="select-plan__radio visually-hidden" type="radio" name="select-month" value="twelve-months" id="select-twelve-month">
<label class="select-plan__label" for="select-twelve-month">12 month</label>
</div>
</div>
<div class="spacer spacer-gap--16"></div>
<button class="select-plan__submit" type="submit">Try now</button>
</form>
</div>【问题讨论】：
-
我没有看到任何 JavaScript，你能分享你的 JavaScript 吗？
-
@GhassenLouhaichi 抱歉，可能忘了附上
标签： javascript html css