addClass不起作用

Question

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

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");
        }
    })
})

演示:小提琴

同样在小提琴中还有许多其他问题

• jQuery没有包括在内
• 风格部分不合适
• 有语法错误

更简单的方法是使用toggleClass()

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

演示:小提琴