如何优先考虑 jQuery 滑块句柄？

Question

我有两个带有<span> 的滑块手柄。这意味着滑块也可以通过附加的跨度来控制。

代码如下：

//jquery code
$('#slider').slider({

   values: [0, 0]


   var handle1 = $('#slider  a.ui-slider-handle, ui-state-default, ui-corner-all').first();
   handle1.append('<span class="sidecar"></span>');

   var handle2 = handle1.next();
   handle2.append('<span class="sidecar2"></span>');
}


//css code
.sidecar {
    position: absolute;
    top: 50px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #f00;

}

.sidecar2 {
    position: absolute;
    top: 80px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #000000;

}

当它们彼此重叠时（例如在 (0,0) 处），即使我尝试拖动附有 <span> '.sidecar2' （黑色）的手柄，它总是会移动滑块红色<span> 附在上面。其背后的原因是，它是代码中的第一个句柄，介于两者之间。

我已尽我所能修复它。例如。尝试手动将类 ui-state-active ui-state-focus 添加到第二个（黑色）滑块，尝试更改 z-index，但它们都不起作用。 :(

任何帮助将不胜感激。

谢谢。

编辑： 我能找到的唯一解决方案在这里给出： 我已经创建了 2 个相互重叠的滑块，每个滑块都有一个手柄。效果很好。

Answer 1

这里给出了我能找到的唯一解决方案： 我已经创建了 2 个相互重叠的滑块，每个滑块都有一个手柄。效果很好。