如何使用不同的图像每个JQuery用户界面滑块手柄
题
我使用具有两个把手一个jQuery UI滑动器(a.k.a 范围滑块)。我知道如何风格第一把手:
.ui-slider-horizontal .ui-slider-handle {background: white url(https://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;}
但我怎么不同样式的第二把手?
使用萤火虫我可以看到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类添加到第二把手?在任何人面前一个整洁的方式做到了这一点?
解决方案
$(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