javascript - addClass 不起作用

Question

这是一个简单的“addClass”函数，我正在尝试，但它不起作用。应该是代码中某处的简单事情)))。文本应根据用户在此处 http://jsfiddle.net/PatrickObrian/gdb5t/ 中 radioGroup1 中的选择更改颜色

HTML

<div class="test">Information that I want to be coloured</div>
<div>
   <label><input type="radio" id="A" name="RadioGroup1" value="Y">Yes</label>
    <br>
   <label><input type="radio" id="B" name="RadioGroup1" value="N">No</label>
</div>

JS

<script>
 $('input[type=radio][name=RadioGroup1]').change(function(){
 if (this.value == 'Y') {
        $('.test').addClass("classGreen");
}
else if (this.value == 'N') {
        $('.test').addClass("classRed");
}
    }


</script>

CSS

.classGreen {color: green} 
.test {font-size:24px}
.classRed {color: red}

提前致谢!

Answer 1

您需要删除以前关联的类，然后添加新的类。

jQuery(function () {
    $('input[type=radio][name=RadioGroup1]').change(function () {
        if (this.value == 'Y') {
            $('.test').removeClass('classRed').addClass("classGreen");
        } else if (this.value == 'N') {
            $('.test').removeClass('classGreen').addClass("classRed");
        }
    })
})

演示:Fiddle

fiddle 中还有很多其他问题

• 未包含 jQuery
• 样式部分不正确
• 存在语法错误

<小时/>

更短的方法是使用toggleClass()

jQuery(function () {
    $('input[type=radio][name=RadioGroup1]').change(function () {
        $('.test').toggleClass("classGreen", this.value == 'Y');
        $('.test').toggleClass("classRed", this.value != 'Y');
    })
})

演示:Fiddle