1

我发现可以使用以下代码自定义 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')});

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

4

2 回答 2

2

为什么不上课，然后当事件被触发时

.addClass() ;

?

于 2012-10-03T08:30:22.953 回答
0

发布此查询后，我在封面下进行了更深入的研究，并发现了一些有趣的事情。

  • Firstly, the jQuery > selector only returns child elements. In the case of the flip switch the element to be styled is actually a grandchild. So my code should have been

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

since the grandchild in question that requires styling is actually a span element. But this is where things start getting curious

That line of code turns 

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

into

On

i.e. gives the element an inline styling.

If instead I define a class

.georgia{font-family:georgia !important}

the new code is

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

i.e. the elment gets a new class tagged on to it.

Contrary to what the jQuery Mobile documentation suggests this upstyles the element as expected, even without issuing a slider('refresh'). However, the css modification that gives the element additional inline styling does not.

It is not clear to me why this could be happening. Hopefully, there is someone out here who has a better understanding of CSS3 and jQuery who can shed some light on this?

于 2012-10-03T12:40:39.710 回答