Question

我有一个显示滑块当前值的div，div随滑块位置移动。

的答案

我想出了以下代码：

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>

Answer 1

我认为您的标记存在问题（初始值元素宽度？），或者在元素准备好后没有触发此问题。无论如何，这是一个完整的工作样本：

<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的变化只是让我更精确地将值放在滑块顶部，然后改变到你想要它的位置。要检查value元素的宽度，尝试定义此css，这可能是您唯一的问题，如果没有看到标记就无法确定：

#value1 { border: solid 1px red; }

Answer 2

无需模糊编码。 ui的{{1}}有handle和offsetLeft。

这就是你所需要的：

offsetTop

JQuery Slider句柄position（）不起作用

2 个答案: