JQuery滑塊手柄位置（）不起作用

我有一個div，它顯示滑塊的當前值，div與滑塊位置一起移動。JQuery滑塊手柄位置（）不起作用

的答案，我想出了下面的代碼：

function SliderSetup() 
{ 
    $("#slider").slider({ 
      value:0, 
      min: -10, 
      max: 10, 
      step: 2, 
      animate:false, 
      slide: function(event, ui) { 
       setTimeout(showVal, 10); 
      } 
     }); 

    $("#slider").slider("value", 0); 
    showVal(); //setTimeout(showVal, 10) does not work either 
} 

function showVal() { 

var position = $('.ui-slider-handle:first').position(); //i tried offset()-didnt work 
var value = $('#slider').slider('value'); 
$('#value1').text(value).css({'left':position.left}); 
}

DIV的位置是正確的，當用戶使用滑塊，但默認值是不是在正確的位置。（？初值元素寬度）：下面

alt text http://i45.tinypic.com/t4tr9f.jpg

編輯截圖標記

       <tr> 
            <td width="30%"> 
             <h2> 
              Select Value</h2> 
            </td> 
            <td width="60%"> 
             <div id="value1">&nbsp;</div> 
             <div id="slider"> 
             </div> 
            </td> 
            <td> 
             <div id="myDiv"> 
             </div> 
            </td> 
           </tr>

來源

2010-03-07 DotnetDude

+1連續服用一個建議，誠實試圖使其工作，而不是複製/那裏粘貼的東西，用它的生活。 – 2010-03-07 18:55:11

我想有一個與您的標記問題或元素後不觸發這個準備。在任何情況下，這裏是一個完整的工作示例：

<html> 
    <head>  
    <title>Test</title> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> 
    <style type="text/css"> 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     function SliderSetup() 
     { 
      $("#slider").slider({ 
        value:0, 
        min: -10, 
        max: 10, 
        step: 2, 
        animate:false, 
        slide: function(event, ui) { 
         setTimeout(showVal, 10); 
        } 
       });  
      $("#slider").slider("value", 0); 
      showVal(); 
     } 
     function showVal() { 
     var slider = $('.ui-slider-handle:first'); 
     var position = slider.offset(); 
     var value = $('#slider').slider('value'); 
     var val = $('#value1'); 
     val.text(value).css({'left':position.left + ((slider.width() - val.width()) /2), 'top':position.top -20 }); 
     }  
     $(function(){ 
     SliderSetup(); 
     }); 
    </script> 
    </head> 
    <body> 
    <br/><br/><br/> 
    <div id="value1" style="position: absolute"></div> 
    <div id="slider"></div> 
    </body> 
</html>

代碼的非常隔開，希望能夠幫助您找到問題快。 CSS變化就是我更精確地將滑塊上的值集中在滑塊上，然後改變到您希望它位於的任何位置。要檢查你的價值元素的寬度，嘗試定義這個CSS，這可能是你唯一的問題，沒有看到標記不能肯定：

#value1 { border: solid 1px red; }

來源

2010-03-07 18:54:30

@Nick - 我仍然無法找到正確的位置。我用標記更新了我的帖子。寬度屬性可能導致問題？ – DotnetDude 2010-03-07 19:08:43

無需模糊編碼。 ui具有handle，其具有offsetLeft和offsetTop。

這就是你需要：

var posLeft = ui.handle.offsetLeft;

來源

2015-09-15 11:25:40 Jochem

JQuery滑塊手柄位置（）不起作用

回答

相關問題