>我正在尝试更改输入标签的背景颜色。每次我尝试它时，标签的类"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><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>jQuery.load()函数自 1.8 版起被弃用，并在 3.0 版中删除。 我建议使用$(document).ready()
此外，您正在将"selectedLabel"类添加到输入元素，而不是标签。