Javascript 滑块未显示和图形提示 - Javascript Slider not showing and Graph tips

Javascript Slider not showing and Graph tips

本文关键字：图形提示显示 Javascript | 更新日期: 2023-09-27

我知道我做错了什么，因为我还不懂javascript。我的滑块没有显示在网站上，但其他一切都是的。这是我的代码：

<head>
    <meta charset="utf-8" />
    <title>Hellequin - Class - Cra</title>
    <link href="../../css.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="../../code.js"></script>
</head>
<body>
    <table>
         <tr>
                <td>
                    <div class="container">
                        <div id="slider"></div>
                    </div>
                    <br />
                    <table border="1" width="100" height="50">
                        <tr>
                            <td>
                                <input type="text" id="ElephantInfo" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div id="Elephant">Please slide !</div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</body>

CSS

.container {width : 70%; margin: 0px auto;}
#elephant{
    margin-bottom:5px;
    border : 1px solid black;
    width : 50px;
    height : 20px;
    line-height : 20px;
    position : relative;
    text-align : center;
}

爪哇语

$(document).ready(function () {
    $(function () {
        var elephantArr = new Array("",
            "200",
            "199",
            "198",
            "197",
            "196",
            "195",
            "194",
            "193",
            "192",
            "191",
            "190",
            "189");
        var initialValue = 1,
            min = 1,
            max = 200;
        $("#slider").slider({
            value: initialValue,
            min: min,
            max: max,
            step: 1,
            slide: function (event, ui) {
                $("#elephantInfo").val(ui.value);
                $("#elephant").text(elephantArr[ui.value]);
                $("#elephant").css("left", "10px");
            }
        });
        $("#elephantInfo").val(initialValue);
        $("#elephant").text(elephantArr[initialValue]);
        $("#elephant").css("left", "10px");
    });
});

如果有任何关于如何自定义滑块外观的提示，我愿意接受建议！

PS：为糟糕的语言而嗤之以鼻..

Jquery 滑块是 Jquery UI 包的一部分。在当前代码中，您正在多次加载 jquery 1.8.3。

添加这些行以包含 jQuery UI 中的 css 和 js 文件，并且不要忘记删除一个 jquery 包含。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>