jQuery范圍滑塊不出現

Question

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider functionality</title> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript --> <script> $(function () { $("#slider-3").slider({ range: true, min: 0, max: 24, values: [9, 18], slide: function (event, ui) { $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]); } }); $("#price").val( $("#slider-3").slider("values", 0) + ":00" + " - " + $("#slider-3").slider("values", 1) + ":00"); }); </script> </head> <body> <!-- HTML --> <p> <label for="price">Email Working Timeframe</label> <input type="text" id="price" style="border:0; color:#b9cd6d; font-weight:bold;"> </p> <div id="slider-3"></div> </body> </html>

當我運行代碼/時，滑塊不會出現

我在jsfiddle上有代碼，它可以正常工作，但是我不確定為什么我自己運行它時不起作用。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider functionality</title>

    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


    <!-- Javascript -->
    <script>
        $(function () {
            $("#slider-3").slider({
                range: true,
                min: 0,
                max: 24,
                values: [9, 18],
                slide: function (event, ui) {
                    $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]);
                }
            });
            $("#price").val( $("#slider-3").slider("values", 0) + ":00" +
                " - " + $("#slider-3").slider("values", 1) + ":00");
        });
    </script>
</head>

<body>
    <!-- HTML -->
    <p>
        <label for="price">Email Working Timeframe</label>
        <input type="text" id="price"
               style="border:0; color:#b9cd6d; font-weight:bold;">
    </p>
    <div id="slider-3"></div>
</body>
</html>

我得到的唯一輸出是“電子郵件工作時間表”

Answer 1

請根據以下腳本嘗試。 它工作正常。

 <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider functionality</title> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <!-- HTML --> <p> <label for="price">Email Working Timeframe</label> <input type="text" id="price" style="border:0; color:#b9cd6d; font-weight:bold;"> </p> <div id="slider-3"></div> </body> <script> $(document).ready(function(){ $("#slider-3").slider({ range: true, min: 0, max: 24, values: [9, 18], slide: function (event, ui) { $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]); } }); $("#price").val( $("#slider-3").slider("values", 0) + ":00" + " - " + $("#slider-3").slider("values", 1) + ":00"); }); </script> </html>

Answer 2

現在正在工作。 所以問題出在Layout.html文件中，該文件正在調用（@RenderBody（））我的index.html（上面的代碼）。 Layout.html正在執行@ Scripts.Render（“〜/ bundles / jquery”），我在index.html中建立了另一個jquery鏈接，這是多余的，而我需要的jquery無法鏈接。

jQuery范圍滑塊不出現

問題描述

2 個解決方案

解決方案1
0 2019-07-29 07:11:51

解決方案2
0 2019-07-30 01:56:51

jQuery范圍滑塊不出現

問題描述

2 個解決方案

解決方案1 0 2019-07-29 07:11:51

解決方案2 0 2019-07-30 01:56:51

解決方案1
0 2019-07-29 07:11:51

解決方案2
0 2019-07-30 01:56:51