Question

我有下面的代码，它将一些css应用于某些单选按钮。这很好用。但是，我需要一种方法，这样当我右键单击其中一个按钮时，它会将背景颜色切换为红色。

<script>
$('body').on('contextmenu', '.checkItem', function(event)
    {
        event.preventDefault();
        //Toggle Colour here
    }
</script>

<style>
.checkItem
{
    display:inline-block;
    width: 12em;    
    height: 64px;
    margin:5px;
    background: #ddd;
    border-radius: 4px;
    position: relative;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

.CheckItem label
{
    display: block;
    width: 10em;
    border-radius: 4px;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 3px;
    z-index: 100;
    background: #FFFFFF;
    color: #EDEDED;
    padding:5px;
    box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
    height: 48px;
}

.checkItem input[type=radio]:checked + label 
{
    background: #CCFFCC;
    color: #000000;
}
</style>

<div class="checkItem">
    <input class="input_checkItem" type="radio" name="n_radio" value="34" id="0" checked="checked">
    <label for="0">button1</label>
</div>

<div class="checkItem">
    <input class="input_checkItem" type="radio" name="n_radio" value="35" id="1" checked="">
    <label for="1">button2</label>
</div>

我尝试添加一个类：

$(this).children("label").addClass('colRed');

但这没有用。课程出现了，但颜色并没有改变。

我最接近的是：

$(this).children("label").toggle(function () 
        {
            $(this).children("label").css({'background-color' : '#CC9999'});
        }, function () {
            $(this).children("label").css({'background-color' : ''});
        })

但是，这标志着＆＃39;标签＆＃39;到＆＃39; style="display: block;"＆＃39;而我本来期望＆＃39; style="background-color":"#CC9999"＆＃39;

我缺少什么？

Answer 1

jquery css-function工作如下：

 $( this ).css( "color", "red" );

所以你想要的应该是这样的：

$(this).children("label").css('background-color' , '#CC9999');

查看该页面了解更多信息：http://api.jquery.com/css/

Answer 2

好吧，它不像使用＆＃39; toggle＆＃39;那样干净，但似乎有效：

$('body').on('contextmenu', '.checkItem', function(event)
    {
        event.preventDefault();

        if($(this).children("label").hasClass('ignore'))
            {
                $(this).children("label").removeClass('ignore')
                $(this).children("label").css('background-color' , ''); 
            }
        else
            {
                $(this).children("label").addClass('ignore')
                $(this).children("label").css('background-color' , '#CC9999');
            }
    })

{p>为什么.toggle没有工作我不知道。但目前我还有办法做到这一点。

JQuery - 切换css样式单选按钮标签的背景颜色

2 个答案: