使用addClass进行JQUery UI元素自定义

时间:2012-08-10 15:10:13

标签: jquery css jquery-ui

我通过为其句柄指定自定义样式来扩展JQuery UI滑块。

代码如下:

JavaScript的:

var slider = $("#container").slider();
var handle = $(".ui-slider-handle", slider);

然后我正在做

handle.css("backgroundColor","yellow");

有效。

但是当我创建一个类:

.yellow
{
   background-color: yellow;
}

并使用

  handle.addClass("yellow"); // works!

它不会捡起来。让我澄清一件事 - CSS位置是有效的,我的自定义CSS在之后 CSS应用,如果我通过编写来覆盖自定义CSS中的JQuery原始样式:

.ui-slider-horizontal .ui-slider-handle 
{ 
   background-color: yellow;    
}

它再次起作用。它只是addClass似乎并不值得尊敬。有人可以建议我如何使用addClass吗?

1 个答案:

答案 0 :(得分:1)

我认为您对css specificity有疑问,这意味着您的班级.yellow的特异性较低.ui-slider-horizontal .ui-slider-handle

一种解决方案是将特异性添加到黄色,这样它就不会像

那样被覆盖
.ui-slider-horizontal .ui-slider-handle.yellow {
background-color: yellow;
}