JQuery UI Slider 显示在一个页面上，但没有显示在其他页面上，尽管代码几乎相似

Question

好吧，这真的让我发疯了。这是我想要实现的一个工作示例： http://www.rockaholics-cologne.de/root/testslidenew.php

但是在我的其他 php 脚本中，我包含完全相同的 css 和 js 库，并且滑块功能的代码基本相同，只是滑块不显示的值不同：

<tbody>
<?php
    include_once("php_includes/db_conx.php");
    $sql = "SELECT TIME_TO_SEC(starttime), TIME_TO_SEC(endtime), date FROM wishtimes WHERE date BETWEEN '$startDate' AND '$endDate' ORDER BY date";
    $query = mysqli_query($db_conx, $sql);      
    $wishtimes = array();
    while($row = mysqli_fetch_assoc($query)) {
        $weekday = date('l', strtotime($row['date']));
        $wishtimes[$weekday] = $row;
    }
    $dates = date_range($startDate, $endDate);
    print_r ($wishtimes);
    print_r($dates);
    $weekdays = array("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
    for($i=0; $i < count($weekdays); $i++) {
?>
<tr>
<td><?php echo $weekdays[$i]?></td>
<?php
    if (isset($wishtimes[$weekdays[$i]])) { 
?>
    <td colspan="25">TEST<div id="slider<?php echo $i?>"></div></td>
    <script>
    $(function() {
        var start = "<?php echo $wishtimes[$weekdays[$i]]['TIME_TO_SEC(starttime)']?>";
        var end = "<?php echo $wishtimes[$weekdays[$i]]['TIME_TO_SEC(endtime)']?>";
        start = start / 60;
        end = end / 60;
        $("#slider<?php echo $i?>").slider({
            range: true,
            min: 0,
            max: 1440, /* Hour * 60 from 0:00 to 24:00 */
            step: 15,
            values: [ start, end ],
            slide: function(e, ui) {
                var hours = Math.floor(ui.value / 60);
                var minutes = ui.value - (hours * 60);

                if(hours.length == 1) hours = '0' + hours;
                if(minutes.length == 1) minutes = '0' + minutes;

                $('#something').html(hours+':'+minutes);
            }
        });
    });
    </script>           
    <td>
        <a href><i class="icon-minus-sign"></i></a>
    </td>
<?php
    } else {
?>
    <td colspan="25">
        <script type="text/javascript">
        function toggle(id) {
            if ($('#'+id).is(":hidden")) {
                $('#'+id).slideDown("fast");
            } else {
                $('#'+id).slideUp("fast");
            }
        }
        </script>
        <button id="addwishtime" onclick="toggle('<?php echo $i?>')">Add</button></br>      
        <div id="<?php echo $i?>" style="display: none;">
        <?php
            /*          --- select FIRM of the current user ---
            $sql = "SELECT firm FROM team WHERE username='$log_username' LIMIT 1";
            $query = mysqli_query($db_conx, $sql); 
            while ($row = mysql_fetch_array($query)) {
                $firmname = $row[0];
            } */    
            $sql = "SELECT starttime, endtime, shiftname, firm FROM shifts WHERE firm='TestBusiness' ORDER BY starttime ASC";
            $query = mysqli_query($db_conx, $sql); 
            while($shifts = mysqli_fetch_array($query)) {
        ?>
        <form method="post" action="">
            <input type="hidden" value="<?php echo $dates[$i]?>" name="date">
            <?php echo $dates[$i]?>
            <input type="hidden" value="<?php echo $shifts['firm']?>" name="firm">
            <?php echo $shifts['firm']?>
            <input type="hidden" value="<?php echo $shifts['starttime']?>" name="starttime">
            <?php echo $shifts['starttime']?>
            <input type="hidden" value="<?php echo $shifts['endtime']?>" name="endtime">
            <input type="submit" value="<b><?php echo $shifts['shiftname']?></b> Start: <?php echo $shifts['start']?>  End: <?php echo $shifts['end']?>">
        </form>
        <?php 
        }
        ?>
        </div>
    </td>
</tr>
<?php
    }
    }
?>
</tbody>

“TEST”被打印出来，但没有滑块。如果我在 Chrome 上查看 F12，我可以看到为开始和结束设置了值。滑块 div 也被创建，但高度仅为 0px

我在这里错过了什么？？

编辑

我刚刚从日期选择器中删除了这个脚本，它也在同一页面上，一旦我这样做，它就会显示滑块，但我怎样才能让两者都工作？？？

<script>
$(function() {
    var startDay;
    var endDay;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }

    $('.week-picker').datepicker( {
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
            startDay = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() +1);
            endDay = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
            var startDate = date.getFullYear() + "-" + (date.getMonth() + 1 < 10 ? '0' +  (date.getMonth() + 1) : (date.getMonth() +1)) + "-" + ((date.getDate() - date.getDay() +1) < 10 ? '0' +  (date.getDate() - date.getDay() +1) : (date.getDate() - date.getDay() +1));
            var endDate = date.getFullYear() + "-" + (date.getMonth() + 1 < 10 ? '0' +  (date.getMonth() + 1) : (date.getMonth() + 1)) + "-" + ((date.getDate() - date.getDay() +7) < 10 ? '0' +  (date.getDate() - date.getDay() +7) : (date.getDate() - date.getDay() +7));
            window.location.href = "?startDate=" + startDate + "&endDate=" + endDate;
            selectCurrentWeek();            
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if(date >= startDay && date <= endDay)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>

Answer 1

我希望问题应该是，您将范围值设置为字符串但需要数字或整数类型。请使用以下方法将字符串转换为数字或使用您自己的方法进行转换。

开始 = parseInt(开始); end = parseInt(end);

试试这个，希望你能得到答案。谢谢。