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

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

未包含jQuery
风格部分不合适
存在语法错误

较短的方法是使用toggleClass（）

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

演示：Fiddle

Answer 2

您应该删除其他颜色类名称，还要检查点击事件：

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

我也不知道但这适用于CSS：

<style type="text/css">
.test { font-size:24px }
.classRed { color: red }
.classGreen { color: green } 
</style>

：）

addClass不起作用

2 个答案: