Question

我发现可以使用以下代码自定义jQuery Mobile翻转开关的字体，颜色和字体大小

CSS

.contel *{font-family:arial !important;color:red !important;font-size:0.8em !important}

标记

<div class="contel">
 <select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
 </select>
</div>

这非常好，但我需要做的是在运行时根据具体情况而不是静态CSS应用这样的样式。

问题归结为此 - 有没有办法通过jQuery实现这一目标？

我尝试过的事情

$.each($('.contel > *'),function(ndx,e){$(e).css('fontFamily','arial')});

但它没有任何效果。我非常感谢任何帮助。

Answer 1

为什么不上课，然后才触发事件

.addClass() ;

Answer 2

在我发布此查询并发现一些有趣的事情之后，我更深入地了解了。

首先，jQuery＆gt; selector仅返回子元素。在翻转开关的情况下，要设计样式的元素实际上是孙子。所以我的代码应该是

$。each（$（'。contel＆gt; *＆gt; span'），function（ndx，e）{$（e）.css（'fontFamily'，'arial'）}）;

因为有问题的孙子需要造型实际上是一个跨度元素。但这就是事情变得好奇的地方

该行代码转为

<span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 0%; ">On</span>

进入

开启

即。为元素赋予内联样式。

如果我定义了一个类

.georgia{font-family:georgia !important}

新代码

<span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all georgia" role="img" style="width: 0%; ">On</span>

即。 elment获得了一个标记在其上的新类。

与jQuery Mobile文档建议的相反，即使没有发布滑块（'refresh'），也会按预期对元素进行整理。但是，为元素添加内联样式的css修改不会。

我不清楚为什么会发生这种情况。希望有人能够更好地理解CSS3和jQuery谁可以对此有所了解？

jQuery Mobile Flip Switch样式

2 个答案: