jQuery雙滑塊手柄重疊

我想修改jQuery雙滑塊。除了一件事以外，一切正常。然後2個手柄處於相同的位置，在最後一個移動過程中未處於活動狀態的手柄不能在之後進行拖動，除非將另一個移動到不同的位置。這裏有一個例子：jQuery雙滑塊手柄重疊

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>";

我怎樣才能修復這個bug？

來源

2014-02-05 Stanimir Dyakov

偏題：爲什麼不''（'＃rail a'）。eq（1）'？ – isherwood

我習慣於使用JavaScript而不是jQuery。我不知道，但我會嘗試。 –

這似乎是一個jQuery的實現選擇，而不是一個錯誤。

如果你真的想改變這種行爲，修復可能是兩種：用戶

檢查是否拖動上方或中線下方，並相應地改變頂部或底部的滑塊值。
檢查拖動方向是左側還是右側，然後將頂部或底部滑塊標記爲活動的滑塊。

來源

2014-02-05 18:11:40 Fletcher91

我不是很擅長jQuery ......你能告訴我如何將滑塊標記爲活動滑塊嗎？我試圖改變兩個拇指的z-Index，但它沒有幫助。 –

我發現了一個jQuery [關於此問題的bug報告]（http://bugs.jqueryui.com/ticket/9553），如果您對jQuery沒有經驗，我建議您在那裏添加註釋。選擇是在jquery.ui.slider.js的_mouseCapture函數中進行的，如果事件是拖動，您需要爲定向函數設置'closestHandle'。 – Fletcher91

非常感謝！這幫助我解決了這個問題！ :) –

jQuery雙滑塊手柄重疊

回答

相關問題