0

jquery モバイルには、独自のルック アンド フィールが必要な一連のボタンがあります。私は彼らにカスタムクラスを与えました (例: "custom_btn")。それらは特定のページのフッターにあります。を使用してテキストサイズを変更できます

#thisPage .ui-footer .ui-btn-text {
    font-size: 36px;
}

問題は、これがフッターのすべてのボタンに影響するのではなく、.custom_btn クラスのボタンだけに影響することです。私は次のことを試しましたが、すべて役に立ちませんでした：

.ui-footer .custom_btn.ui-btn-text
.ui-footer .custom_btn .ui-btn-text
.ui-footer .ui-btn-text .custom_btn
.ui-footer .ui-btn-text.custom_btn
.ui-footer .custom_btn.ui-btn-inner .ui-btn-text
.ui-footer .custom_btn .ui-btn-inner .ui-btn-text
.ui-footer .custom_btn-button .ui-btn-text
.ui-footer button.custom_btn .ui-btn-text
.ui-footer button .custom_btn .ui-btn-text

Web インスペクタを見ると、クラスがボタン レベルにあるように見えます。したがって、.ui-btn-text の祖先であり、.ui-btn の子である必要があります。ただし、コードに .custom_btn クラスを配置するたびに、スタイリングが崩れます。これらのボタンにカスタム スタイルを適用するにはどうすればよいですか?

編集: これは、ボタンを生成するために使用しているコードで、1 ～ 9 のラベルが付けられています (ボタン タグの前にある余分な空白は無視してください。この投稿にタグを表示するためのものです)。

    < button data-role="button" class="construct_answer" data-inline="true" value=1>1</button>;
    < button data-role="button" class="construct_answer" data-inline="true" value=2>2</button>;
    < button data-role="button" class="construct_answer" data-inline="true" value=3>3</button>;
    < button data-role="button" class="construct_answer" data-inline="true" value=4>4</button>;
    < button data-role="button" class="construct_answer" data-inline="true" value=5>5</button>;
    < button data-role="button" class="construct_answer" data-inline="true" value=6>6</button>;

外部の.jsファイルには、このコードがあります

$(document).bind('pagecreate',function(e){
    if (e.target.id == 'assessment') {
        $('.consruct_answer').prev().css({'font-size':'30px'});
    }
}

興味深いのは、このコードを「コンテンツ」セクションに含めると、Phil が提供したソリューションを使用して問題なくボタンのスタイルを設定できることです。ただし、この同じコードがフッターにあると機能しません。これがなぜなのか手がかりはありますか？

4

0 に答える 0