Question

我正在尝试修改jQuery双滑块。除了一件事，一切都很好。然后2个手柄处于相同的位置，在最后一次移动期间不活动的手柄之后不能被拖动，除非你将另一个手柄移动到不同的位置。这是一个例子：

http://author.euro.confirmit.com/extwix/extquicktest_p564156043.aspx?__qtkey=9cffc015a10443a6ac0706c1abb41324&l=9

因此，如果您首先尝试移动下部手柄，则不能移动上部手柄。或者您将移动上部手柄。

我的代码如下：

<div style='width: 510px; text-align: right; color: #000000; margin-top: 50px;'> 100 </div>
<div id='rail'> </div>
<div style='width: 500px; text-align: left; color: #000000; margin-bottom: 50px;'> 0 </div>

$( '#rail' ).slider({
      range: true,
      min: 0,
      max: 100,
      values: [ 50, 50 ],
      slide: function( event, ui ){  
          $('#upper_result').html(ui.values[0]); 
          $('#q160_1').val(ui.values[0]); 
          $('#lower_result').html(ui.values[1]); 
          $('#q160_2').val(ui.values[1]);
      }
 });

var lower = document.getElementById('rail').getElementsByTagName('a')[1];
var upper = document.getElementById('rail').getElementsByTagName('a')[0];

lower.style.cssText="left: 250px; top: 35px; background: url('http://media.jts-mr.com/CustomeQuestions/Classic Slider/lower_thumb.gif')";
lower.innerHTML = "<div class='result' id='lower_result' style='position: absolute; top: 22px;'>" + $( '#rail' ).slider( 'values', 1 ) + "</div>";
upper.innerHTML = "<div class='result' id='upper_result' style='position: absolute; top: -20px;'>" + $( '#rail' ).slider( 'values', 0 ) + "</div>";

如何修复此错误？

Answer 1

这似乎是一个jquery实现选择而不是bug。

如果您真的想要更改此行为，可以修复：

检查用户是否拖动中心线的上方或下方，并相应地更改顶部或底部滑块值。
检查拖动方向是左侧还是右侧，然后将顶部或底部滑块标记为活动滑块。

jQuery双滑块处理重叠

1 个答案: