Question

我一直在努力改变JQuery中标签的颜色。我能做的最多就是改变标签内文字的颜色。请找到我尝试的以下代码。

标签代码：

<input type='radio' name='specific_consultant' id='test1' value='no'>No</input>

JQuery函数

$(document).ready(function() {
    var button = $('#test1');
    button.click(function() {
        button.css('color', 'FOO');
    });
});

但是，我如何更改特定事件上的标签颜色，例如this，它会在标签中显示结果？

Answer 1

不需要完全是一个标签。您可以使用<div>并设置样式inline-block，然后设置背景颜色：

CSS

.result{
    background-color: #F00;
    display: inline-block;
    /* transition effect */
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

HTML

<div class="result"></div>s

的javascript

function setColor(mycolor,defaultcolor,myElement){
    $(myElement).css("background",mycolor);
    //if you need the color back to normal
    //in 1 sec the color will back to normal
    setTimeout(function(){
        $(myElement).css("background",defaultcolor);
    },1000)
}

Answer 2

你的JS代码很好但你需要将标签添加到无线电输入：

<label for="test1">
  <input id="test1" type="radio" value="no">No
</label>

然后在你的js：

$(document).ready(function() {
    var button = $('#test1');
    button.click(function() {
        // Target the <label>
        button.parent().css('color', '#F00');
    });
});

查看此 DEMO

Answer 3

简单地将此添加到您的css：

#test1 {
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
}

或者您可以使用ainmate功能代替 css 。

如何在特定事件上为JQuery中的Label颜色设置动画？

3 个答案: