0

これがどのように機能するかについて少し混乱しています。スライダーがアクティブなときに、入力ボックスで秒の値を「hh:mm:ss」に変換しようとしています。

ここで、div は開始時間と終了時間を秒単位で表示します。スライドに合わせて調整

    <div class='slider-example col-xs-12 col-sm-6 col-lg-5 center-block'>
        <div class="well">

                <input id="ex2" type="text" class="span2" value="[{{ start_length }},{{ end_length }}]" data-slider-min="{{ start_length }}" data-slider-max="{{ end_length }}" data-slider-step="1" data-slider-value="[{{ start_length }},{{ end_length }}]" data-slider-selection="after" data-slider-tooltip="hide"/>
            </div> <!-- /well -->
        </div> <!-- /slider example -->
                 <div class = "container col-xs-12 col-sm-6 col-lg-5 center-block">
                    <form class="form-inline">
                    <div class = "container col-xs-4">
                     <div class="form-group">

                        <label for="bar">Start:</label>
                        <input type="text" class="form-control"  id="bar">

                     </div>
                            </div>
<div class = "container col-xs-4 pull-right">
                     <div class="form-group">

                        <label for="bar1">End: </label>
                        <input type="text" class="form-control"  id="bar1">

                    </div>
                        </div>

                    </form>
                 </div>

ここに私のjavascriptがあります

<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type='text/javascript' src="{{url_for('static', filename='js/bootstrap-slider.js')}}"></script>
<script type='text/javascript'>

    function secondsTimeSpanToHMS(s) {
        var h = Math.floor(s/3600);
        s -= h*3600;
        var m = Math.floor(s/60);
        s -= m*60;
        return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s);
    }

    $(document).ready(function(){

        /* Example 2 */
        $("#ex2").slider({});
        $("#ex2").on('slide', function (ev) {
                $('#bar').val(ev.value.slice(",")[0]);
                $('#bar1').val(ev.value.slice(",")[1]);
        document.getElementById('#bar').innerHTML = secondsTimeSpanToHMS('#bar');
        document.getElementById('#bar1').innerHTML = secondsTimeSpanToHMS('#bar1');
     });

    });

</script>
4

1 に答える 1

1

あなたが意図したことをしているとは思えませんが、これがやろうとしていることです

 $("#ex2").on('slide', function (ev) {

範囲ハンドルをスライドするとスライド イベントがトリガーされ、各ハンドルの値を含む 2 要素の配列が返されます。

         $('#bar').val(ev.value.slice(",")[0]);
         $('#bar1').val(ev.value.slice(",")[1]);

これは、id が bar と bar1 の要素の値を範囲ハンドル値に設定しようとする試みです。これは、bar と bar1 がフォーム要素 (textbox、textarea など) である場合に機能します。

         document.getElementById('#bar').innerHTML = ...              
         document.getElementById('#bar1').innerHTML = ...

これは、ID #bar および #bar1 を持つ要素の innerHTML を設定しようとdocument.getElementByIdします - ただし、 を使用しているため、# を前に付けるのではなく、bar および bar1 を使用する必要があります (jQuery の場合と同様)。

         ... = secondsTimeSpanToHMS('#bar');
         ... = secondsTimeSpanToHMS('#bar1');

上記は範囲ハンドル値を使用して関数を実行しようとしたものだと思いますが、コードはこれらの関数に jQuery セレクターを誤って渡しています。関数は秒単位の値を期待しています。

最後に、secondsTimeSpanToHMSは秒の値を取り、それを時:分:秒に変換します。

以下は、あなたが探しているものに少し近いかもしれません

$(document).ready(function () {
    /* Example 2 */
    $("#ex2").slider({});
    $("#ex2").on('slide', function (ev) {
        $('#bar').val(secondsTimeSpanToHMS(ev.value.slice(",")[0]));
        $('#bar1').val(secondsTimeSpanToHMS(ev.value.slice(",")[1]));
    });
});

または、別の2 つの要素の innerHTML を出力に設定secondsTimeSpanToHMSし、元の関数の .val() 行を保持することもできます。

于 2015-08-18T10:34:31.243 に答える