2

我有一个相当简单的表单，其中包含一个 HTML5 范围元素（呈现为滑块）。代码如下所示：

<form name="redform" id="redform" action="/">
    <input id="id"        name="id"        type="hidden" value="<?php echo $row['id']; ?>" />
    <input id="sliderRed" name="sliderRed" type="range"  value="<?php echo $data[5]; ?>" min="0" max="255" />
</form>
<p class="note">Current value: <span id="redValue">0</span></p>
<div style="text-align:center; color:#FF0000" id="redresults"></div>

随之而来的是一些 jQuery，它在滑块移动时执行外部 php 脚本：

$(function(){
    var redValue = $('#redValue');
    $('#sliderRed').change(function(){
        redValue.html(this.value);
    }); 
    $('#sliderRed').mouseup(function(){
        $.post('process.php',  $("#redform").serialize(), function(data) {
            $('#redresults').html(data);
            $('#redresults').fadeIn('slow').delay(2000).fadeOut('slow');
        });
    });
    $('#sliderRed').change();
});

所有这些都有效。我可以移动滑块，实时更新值，释放滑块时运行 PHP 脚本。这就是奇怪的地方。范围滑块的最大值和最小值设置为 0 和 255。但是，有时，当将滑块一直拖动到一端时，它只会达到 1 或 254。似乎没有任何模式到何时有时候是这样的。有时它会走全范围，有时它不能一路走。甚至在按住鼠标并前后拖动鼠标时也是如此。

如果将最大值和最小值分别更改为 256 和 -1，则会观察到类似的行为。有时它会在 256 时达到最大值，有时它会在 255 时达到最大值。在底端，它有时会达到 -1，有时它只能被拖到 0。这对我来说表明它没有与实际数字有关，但有一些奇怪的“一对一”错误。

对此有什么想法吗？我完全被难住了...

4

3 回答 3

1

您可以考虑在 jQuery UI 中使用滑块对象和“停止”对象以获得更好的性能。看到这个线程。

于 2013-01-22T01:51:05.893 回答
0

使用 setTimeout() 将 mouseup 回调的执行延迟 10 毫秒左右。

更新：

为了澄清，下面的代码应该可以工作。我以前也遇到过同样的问题，设置一个小的延迟解决了这个问题。（经过进一步思考，我不记得所需延迟的确切持续时间；如果您实现此代码并且问题仍然存在，您可能会增加延迟值。）

$('#sliderRed').mouseup(function() {
    setTimeout(function() {
        $.post('process.php',  $("#redform").serialize(), function(data) {
            $('#redresults').html(data);
            $('#redresults').fadeIn('slow').delay(2000).fadeOut('slow');
        });
    }, 10);
});
于 2013-01-22T00:46:43.560 回答
0

虽然提供的建议很棒（感谢 Jason）。值得解释为什么这个问题实际上会发生。我将此作为错误提交给铬错误跟踪器，认为它可能是铬错误。我猜对了一半。请参阅此处的帖子：http ://code.google.com/p/chromium/issues/detail?id=171362

问题是，如果滑块的长度不是至少 256 像素，那么不可能选择所有值。使用 CSS，您可以将宽度更改为 256px，这消除了我在问题中描述的问题。

<input id="sliderRed" name="sliderRed" stlye="width:256px;" type="range"  value="<?php echo $data[5]; ?>" min="0" max="255" />

然而，这个限制使得使用 jQuery-UI 成为首选的解决方案，而我最终可能会实现它。

于 2013-01-23T19:48:52.027 回答