从无线电输入标签中添加和删除类

Question

我正在尝试更改输入标签的背景颜色。每次我尝试时，标签的“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>

Answer 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>

Answer 2

jQuery .load() 函数自 1.8 版起已弃用，并在 3.0 版中被删除。 我建议使用$(document).ready()

另外，您将“selectedLabel”类添加到输入元素，而不是标签。