2

HTML5 範囲要素が 1 つ (スライダーとしてレンダリングされる) のかなり単純なフォームがあります。そのためのコードは次のようになります。

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

これに付随するのは、スライダーが移動するたびに外部の php スクリプトを実行する jQuery です。

$(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 までしかドラッグできないこともあります。実際の数値と関係がありますが、奇妙な "off-by-one" バグがあります。

これについて何か考えはありますか？私は完全に困惑しています...

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

提供された提案は素晴らしいものですが (ジェイソンに感謝します)。この問題が実際に発生する理由を説明する価値があります。これは、クロムのバグである可能性があると考えて、クロムバグトラッカーにバグとして送信しました。私は半分正しかった。ここの投稿を参照してください: 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 に答える