Question

目前，我有一个jquery函数，我试图显示时间（我使用的jquery是这里的基本示例：http://jonthornton.github.io/jquery-timepicker/）。当我实施Thornton先生的时间选择器时，我可能会点击输入字段并且时间选项列表会下降，但下拉列表侧面没有滚动条/滑块（正如他的示例中所示））。我选择的时间值（我可以使用鼠标滚轮在选择中上下移动）能够插入我的SQL数据库（通过$ _POST）而没有任何问题，但是，我希望能够使用在桑顿先生的网站上列出的其他一些jquery例子 - 但是没有一个（除了基本示例 - 似乎只是部分工作）将起作用。附件是相关的代码。任何输入都将非常感激。另外，我尝试了本教程（https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery），因此我尝试添加脚本（注意：10/9/17 https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js），但似乎没有任何效果。< / p>

    <?php
    //DOCTYPE begins header.html
    include_once("includes/header.html");

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!--<style media="screen"></style>-->

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Crime Stoppers</title>

        <!--added 10/9/17-->
        <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
        <!--<script src="js/scripts.js"></script>-->

        <!--Austin's Original links and scripts-->
        <link rel="stylesheet" type="text/css" href="./styles/styles.css"/>
        <link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.css"/>
        <link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.min.css"/>
        <link rel="stylesheet" href="./jquery/timepicker/jquery.timepicker.css"/>
        <script type="text/javascript" src="./jquery/js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
        <script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script type="text/javascript" src="./jquery/timepicker/jquery.timepicker.js"></script>

        <script type="text/javascript">
            $(function () {
                $('#basicExample').timepicker();
    //            $('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });
    //            $('#setTimeExample').timepicker();
    //            $('#setTimeButton').on('click', function (){
    //                $('#setTimeExample').timepicker('setTime', new Date());
    //            });
            });
        </script>

    </head>

    <body>
    <div id="header" align="center"><img src="./images/document.png" alt="header"/></div>

    <div align="center">

            <h1>Crime Stoppers Report</h1>

            <form class="formLayout" action="Violent.php" method="POST">

                <fieldset class="table">
                    <legend>Crime</legend>
                      <div class="tr">
                        <div class="td right">Date of Call:</div>
                        <div class="td"><input type="text" class="datepicker" name="callDate"></div>
                        <div class="td right">Time of Call:</div>
                        <div class="td"><input type="text" id="basicExample" name="callTime"></div>
                    </div>
               </fieldset>
           </form>
     </div>

Answer 1

以下代码为我显示滚动条，以及启用基本时间戳，以及设置日期示例。它不是每一个例子，但会让你在路上

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Crime Stoppers</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker@1.11.12/jquery.timepicker.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/timepicker@1.11.12/jquery.timepicker.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#basicExample').timepicker();
            $('#setTimeButton').on('click', function () {
                $('#basicExample').timepicker('setTime', new Date());
            })
        });
    </script>
</head>
<body>
    <div id="header" align="center"><img src="./images/document.png" alt="header" /></div>
    <div align="center">
        <h1>Crime Stoppers Report</h1>
        <form class="formLayout" action="Violent.php" method="POST">
            <fieldset class="table">
                <legend>Crime</legend>
                <div class="tr">
                    <div class="td right">Date of Call:</div>
                    <div class="td"><input type="text" class="datepicker" name="callDate"></div>
                    <div class="td right">Time of Call:</div>
                    <div class="td"><input type="text" id="basicExample" name="callTime"></div>
                </div>
            </fieldset>
        </form>
        <button id="setTimeButton">Set current time</button>
    </div>
</body>
</html>

＆＃13;

Answer 2

您的问题可能是在文档完全加载之前调用JavaScript函数。

$(function() {
   $(document).ready(function() {
      // Your code here
   }
});

最好只在文档准备就绪时使用JavaScript（a.k.a。document.onload事件），并使用jQuery＆＃39; $(document).ready()事件替换。

JQuery无法正确呈现

2 个答案: