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

このクエリを投稿した後、さらに深く調べてみたところ、興味深いことがいくつか見つかりました。

  • まず、jQuery > セレクターは子要素のみを返します。フリップ スイッチの場合、スタイルを設定する要素は実際には孫です。だから私のコードは

    $.each($('.contel > * > 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>

つまり、要素はそれにタグ付けされた新しいクラスを取得します。

jQuery Mobile のドキュメントで示唆されていることとは反対に、これにより、スライダー ('refresh') を発行しなくても、期待どおりに要素がアップスタイルされます。ただし、要素に追加のインライン スタイルを与える css の変更は行いません。

なぜこれが起こっているのかは私には明らかではありません。願わくば、CSS3 と jQuery をよく理解している人で、これに光を当てることができる人がここにいることを願っています。

于 2012-10-03T12:40:39.710 に答える