Question

我想使用jQuery在html表单上使用滑块。滑块需要00:00和23:55之间的值，并且必须处理它的开始和结束时间。从幻灯片生成的两个值中，需要生成一个表（我假设使用某种for循环），开始时间和结束时间之间的所有时间以五个小步的增量显示。

另一种方法是使用两个具有开始和结束值的选择菜单（第二个必须动态生成，我假设最终用户无法在开始时间之前设置完成时间）。

我更喜欢在jQuery中使用逻辑，因为应用程序的大小是jQuery。如果有人可以帮助甚至建议从哪里开始，我将不胜感激。

丹

更新

好的，我已经设法让滑块使用jQuery UI现在我需要做的就是获取生成的值并循环遍历它以生成一个表，其中包含两个值之间的所有时间：

            var startTime;
        var endTime;
        $("#slider-range").slider({
            range: true, min: 0, max: 1439, values: [540, 1020], step:5, slide: slideTime, /*change: */
        });
        function slideTime(event, ui){
            var minutes0 = parseInt($("#slider-range").slider("values", 0) % 60);
            var hours0 = parseInt($("#slider-range").slider("values", 0) / 60 % 24);
            var minutes1 = parseInt($("#slider-range").slider("values", 1) % 60);
            var hours1 = parseInt($("#slider-range").slider("values", 1) / 60 % 24);
            startTime = getTime(hours0, minutes0);
            endTime = getTime(hours1, minutes1);
            $("#time").html('Opening time: ' + startTime + '<br /> Closing time: ' + endTime);
        }
        function getTime(hours, minutes) {

            minutes = minutes + "";
            if (hours == 12) {
                hours = 12;
            }
            if (hours > 12) {
                hours = hours  ;
            }
            if (minutes.length == 1) {
                minutes = "0" + minutes;
            }
            return hours + ":" + minutes ;
    }

    slideTime();

这是一个很好的小教程，可以让它与时俱进：Using a jQuery UI Slider to Select a Time Range

现在，如果有人可以帮我在表格中输出时间，我们将不胜感激;-D

丹

再次更新

好了，现在几乎已经完成了，我已经从滑块创建了表格，现在我想要做的就是从下拉框传递一个值到复选框。因此，例如，如果有人选择列表中的第3个值，则应选择每个第三个复选框。我认为它会像第n个子选择器一样容易，但3的测试值似乎不起作用

任何想法的家伙？源代码在这里，测试示例在这里：slider test，你可以看到我试图传递第3个选中但代码不起作用。如果我将$（'。chx：nth-child（3）'）更改为$（'。chx：odd'）或$（'。chx：even'），但这不会有任何好处，因为该值是动态的产生

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <link rel="stylesheet" type="text/css" href="stylesheets/custom-theme/jquery-ui-1.8.6.custom.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var startTime;
            var endTime;

            $("#slider-range").slider({
                range: true, min: 0, max: 1439, values: [540, 1020], step:5, slide: slideTime, /*change: */
            });

            function slideTime(event, ui){
                var minutes0 = parseInt($("#slider-range").slider("values", 0) % 60);
                var hours0 = parseInt($("#slider-range").slider("values", 0) / 60 % 24);
                var minutes1 = parseInt($("#slider-range").slider("values", 1) % 60);
                var hours1 = parseInt($("#slider-range").slider("values", 1) / 60 % 24);
                startTime = getTime(hours0, minutes0);
                endTime = getTime(hours1, minutes1);
                $("#time").html('Opening time: ' + startTime + '<br /> Closing time: ' + endTime);
            }
            function getTime(hours, minutes) {
                minutes = minutes + "";
                if (hours == 12) {
                    hours = 12;
                }
                if (hours > 12) {
                    hours = hours  ;
                }
                if (minutes.length == 1) {
                    minutes = "0" + minutes;
                }
                return hours + ":" + minutes ;
        }
        function getTimeloop(minutesloop) {
                minutesloop = minutesloop + "";
                if (minutesloop.length == 1) {
                    minutesloop = "0" + minutesloop;
                }
                return minutesloop ;
        }   
        slideTime();

        $('#generateTable').click(function(){
            var startLoop = parseInt($("#slider-range").slider("values", 0));
            var endLoop = parseInt($("#slider-range").slider("values", 1));
            $('#table').remove();
            $('<table id="table"><tr><th>Times</th><th>Bookable</th><tr>').insertAfter('#generateTable');
            for(i = startLoop; i < endLoop; i+=5)
            {
                $('<tr><td>' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '</td><td><input class="chx" name="' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '" type="checkbox" value="' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '" /></td></tr>').appendTo('#table');
            }


        $('.chx:nth-child(3)').attr('checked', true);

    });
    });
    </script>
    <style>
        #slider-range{width:800px;}
        #slider-range,#time{margin:10px;display:block;}
    </style>
</head>

                             05       10       15       20       25       三十       35       40       45       50       55       60

        生成表

Answer 1

哇，你做了很多没有答案的工作！我建议只是遍历每个复选框并使用模运算来确定是否应该设置它。例如

var i=0;
$('.chx').each(function(){
    $(this).attr('checked',(i % period==0));
    i++;
});

或类似的。每个复选框period为1，其他复选为2 ......

jQuery和从开始和结束值动态生成的表

1 个答案: