JQuery UIスライダーハンドルごとに異なる画像を使用する方法
質問
2つのハンドルを持つJQuery UIスライダー( range スライダー)を使用しています。 最初のハンドルのスタイルを設定する方法:
.ui-slider-horizontal .ui-slider-handle {background: white url(https://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;}
ただし、2番目のハンドルのスタイルを変更するにはどうすればよいですか
Firebugを使用すると、Jqueryが各ハンドルを一意に識別しないことがわかります。
<div id="hourlyRateSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-widget-header" style="left: 26%; width: 46%;"/>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 26%;"/>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 72%;"/>
</div>
だから、クロスブラウザで問題が発生する可能性のあるCSS子セレクターを使用する必要があると思います。または、いくつかのJQueryトリックを使用して、CSSクラスを2番目のハンドルに追加できますか?誰でもこれまできちんとした方法でこれをしましたか?
解決
$(window).load(function(){
handle = $('#slider A.ui-slider-handle');
handle.eq(0).addClass('first-handle');
handle.eq(1).addClass('second-handle');
});
他のヒント
css:
#hourlyRateSlider a:last-child {}
所属していません StackOverflow