0

Web ページにいくつかのスライダーがあり、スライダーの 1 つの色を変更したいが、選択されているセクションのみを変更したい (例: スライダーの範囲は 0 から 100 で、ボタンは 25 で、0 から 25 のみが必要)赤くなります）。

私のスライダーは、.html ファイルで以下を使用します。

<label for="slider-main">Main Slider: </label>
<input type="range" name="slider-main" id="slider-main" value="25" min="0" max="100" data-highlight="true"/>

色が赤に変わるタイミングのルールは次のとおりです。

<script>
if (slider-main-value-one>slider-main-max)
{
$("#slider-main").css("background","red");
}
else
{
$("#slider-main").css("background","");
}
})
</script>

これは、スライダーではなく、ラベルの背景のみを変更します

firebug を使用して、実際のスライダーの色を変更するために変更する必要がある要素を見つけました。

ui-slider-bg ui-btn-active ui-btn-corner-all

問題は、これを JQuery で呼び出す方法がわからないことです。

firebug では、ラベルの色が変わると、次のようになります。

<div class="ui-slider">    
<input id="slider-main" class="ui-input-text ui-body-a ui-corner-all ui-shadow-inset ui-slider-input" type="number" data-type="range" data-highlight="true" max="100" min="0" value="25" name="slider-main" style="background: none repeat scroll 0% 0% red;">

firebug を手動で編集してスライダー自体の色を変更する方法は次のとおりです。

<div class="ui-slider-track ui-btn-down-a ui-btn-corner-all" role="application">
<div class="ui-slider-bg ui-btn-active ui-btn-corner-all" style="width: 28%; background: red"></div>

これは、ラベルの色が変わるコードのすぐ下にあります。

全体として、問題は、クラス「ui-slider-bg ui-btn-active ui-btn-corner-all」を.jsから(または.htmlを使用して?

ありがとうございました！

敬具、

ゲイリー

4

1 に答える 1

0

jQuery でこのセレクターを使用して要素にアクセスできます。

$('.ui-slider-bg.ui-btn-active.ui-btn-corner-all')

または、CSS を使用することもできます (明らかに同じセレクター):

.ui-slider-bg.ui-btn-active.ui-btn-corner-all {
    /* styles */
}

編集：これが作業コードです：

$("#slider-main, #first-slider .ui-slider-bg.ui-btn-active.ui-btn-corner-all").css("background", "red");

JSFiddle で実行しています。

于 2013-04-19T09:49:53.687 に答える