在Jquery mobile中处于活动状态时，单选按钮上的颜色不同 [英] different colors on radio buttons when they are active in Jquery mobile

问题描述

我在jQuery中有三个具有相同主题的单选按钮.如果选择其中之一，则按钮的颜色将更改为在CSS中.ui-btn-active类中指定的颜色.我的单选按钮分别命名为可以见面，不确定"和拒绝".我希望我的Decline单选按钮在选择时具有不同于其他两个的颜色(红色).

I have three radio buttons which have the same theme in jquery. If I select one of them, the color of the button will change to the color specified in my .ui-btn-active class in the css. My radio buttons are named Can meet, not sure and Decline. I want my Decline radio button to have a different color than the two others when it is selected (the color red).

我正在使用Jquery mobile并自定义要在不同主题上具有其颜色的css，并且我已将.ui-btn-active更改为.ui-btn-active-a和.ui-btn -active-b并使它们具有不同的值.我试图在两个ui-btn-active类之间切换而不会碰运气，并且尝试了addClass(..)和removeClass(..)来避免运气.我在jquery-mobile.js中制作了一个方法，如下所示:

I'm using Jquery mobile and have customized the css for which colors I want to have on the different themes and I have changed the .ui-btn-active to .ui-btn-active-a and .ui-btn-active-b and made them with different values. I have tried to switch between the two ui-btn-active classes without no luck, and I have tried the addClass(..) and removeClass(..) without luck. I made a method in my jquery-mobile.js which look like this:

 $.mobile.changeAction = function( activeBtn){
    $.mobile.activeBtnClass = activeBtn;
} 

其中的activeBtn参数将是一个字符串，用于选择我想要的activeBtnClass.我认为问题在于，在重写activeBtnClass之后，我无法刷新它，我尝试了一些刷新方法，但是没有运气.

where my activeBtn parameter will be a string to choose which activeBtnClass I want to have. I think the problem is that I have problems refreshing the activeBtnClass after overriding it, I have tried some refreshing methodes without no luck.

只要单选按钮处于活动状态时具有不同的颜色，我将非常感激.

As long as the radio buttons have different colors when active I will be very thankful.

推荐答案

以下样式应该可以解决问题:

Following styles should do the trick:

.ui-radio:nth-child(1) .ui-icon-radio-on.ui-icon{
    background-color:green;
}
.ui-radio:nth-child(2) .ui-icon-radio-on.ui-icon{
    background-color:grey;
}
.ui-radio:nth-child(3) .ui-icon-radio-on.ui-icon{
    background-color:red;
}​

示例 jsfiddle .

要设置水平堆叠的选择选项的样式，请执行以下操作:

To style Horizontally stacked select options:

.ui-radio:nth-child(1) .ui-radio-on span.ui-btn-inner{
    background-color:green;
}
.ui-radio:nth-child(2) .ui-radio-on span.ui-btn-inner{
    background-color:grey;
}
.ui-radio:nth-child(3) .ui-radio-on span.ui-btn-inner{
    background-color:red;
}​

示例 jsfiddle .

这篇关于在Jquery mobile中处于活动状态时，单选按钮上的颜色不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！