从无线电输入标签中添加和删除类
Posted
技术标签:
【中文标题】从无线电输入标签中添加和删除类【英文标题】：Adding and removing class from radio-input label 【发布时间】：2020-09-29 20:58:55 【问题描述】：我正在尝试更改输入标签的背景颜色。每次我尝试时，标签的“selectedLabel”类都不会更新或更改。 应该在选择输入字段时添加该类，并在没有选择时删除该类。
重要提示：标签和输入没有相同的父元素。
$(document).ready(function()
$('label[class=sliderlabel]').change(function()
$('.sliderlabel').removeClass('selectedLabel')
$(this).parent().addClass('selectedLabel');
);
);.sliderlabel
background-color: rgb(220, 220, 220);
font-size: 18px;
font-weight: 300;
padding: 30px 100px;
margin: 0px;
border: 1px solid rgb(220, 220, 220);
outline: none;
margin: 0px;
color: #3d3d3d;
cursor: pointer;
transition: 200ms;
.sliderlabel:hover
background-color: rgb(235, 235, 235);
border: 1px solid rgb(245, 245, 245);
color: #fa443e;
input[type="radio"]
visibility: hidden;
.selectedLabel
background-color: rgb(180, 180, 180);
border: 1px solid rgb(180, 180, 180);
color: #fa443e;
.selectedLabel:hover
background-color: rgb(180, 180, 180);
border: 1px solid rgb(180, 180, 180);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="changelogSliderButton">
<label class="sliderlabel selectedLabel" id="sliderLabel1" for="iosRadioInput">iOS-App</label>
<label class="sliderlabel" id="sliderLabel2" for="webRadioInput">Web-App</label>
</div>
<div id="slideholder">
<input type="radio" class="radioinput" value="iOS-App" name="changelogInputField" id="iOSRadioInput" checked>
<input type="radio" class="radioinput" value="Web-App" name="changelogInputField" id="webRadioInput">
</div>【问题讨论】：
任何控制台错误？ "Uncaught ReferenceError: $ not defined" 但不知道为什么。 【参考方案1】：<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function ()
$('#slideholder input').change(function ()
$('.sliderlabel').removeClass('selectedLabel');
var selected = $('input:radio:checked').val();
if (selected == 'iOS-App')
$('#sliderLabel1').addClass('selectedLabel');
else if (selected == 'Web-App')
$('#sliderLabel2').addClass('selectedLabel');
);
);
</script>
<style type="text/css">
.sliderlabel
background-color: rgb(220, 220, 220);
font-size: 18px;
font-weight: 300;
padding: 30px 100px;
margin: 0px;
border: 1px solid rgb(220, 220, 220);
outline: none;
margin: 0px;
color: #3d3d3d;
cursor: pointer;
transition: 200ms;
.sliderlabel:hover
background-color: rgb(235, 235, 235);
border: 1px solid rgb(245, 245, 245);
color: #fa443e;
input[type="radio"]
visibility: hidden;
.selectedLabel
background-color: rgb(180, 180, 180);
border: 1px solid rgb(180, 180, 180);
color: #fa443e;
.selectedLabel:hover
background-color: rgb(180, 180, 180);
border: 1px solid rgb(180, 180, 180);
</style>
</head>
<body>
<div id="changelogSliderButton">
<label class="sliderlabel selectedLabel" id="sliderLabel1" for="iOSRadioInput">iOS-App</label>
<label class="sliderlabel" id="sliderLabel2" for="webRadioInput">Web-App</label>
</div>
<div id="slideholder">
<input type="radio" class="radioinput" value="iOS-App" name="changelogInputField" id="iOSRadioInput" checked>
<input type="radio" class="radioinput" value="Web-App" name="changelogInputField" id="webRadioInput">
</div>
</body>
</html>【讨论】：
谢谢，正是我要找的东西【参考方案2】：jQuery .load() 函数自 1.8 版起已弃用，并在 3.0 版中被删除。
我建议使用$(document).ready()
另外，您将“selectedLabel”类添加到输入元素，而不是标签。
【讨论】：
已更改但仍然出现错误 - “未捕获的 ReferenceError: $ 未定义” 我在 HTML 文件中做以上是关于从无线电输入标签中添加和删除类的主要内容，如果未能解决你的问题，请参考以下文章
摩托罗拉 XT910 从蓝牙低功耗标签 ticc2540、ticc2541、蓝色无线电标签读取 rssi 等于 0
无线电隐藏。改为显示 div 类。单击 div 选择链接的收音机