javascript - 滑块在浏览器中显示类似框，但在 Fiddle 中工作正常（控制台中无错误显示）

Question

我正在实现 Slider，它在Fiddle (Working)中运行良好，但在浏览器中实现时显示类似框。这是它在浏览器中的显示方式的图片。

代码.html

<html lang="en">
        <head>
          <meta charset="utf-8">
          <title>jQuery UI Slider - Multiple sliders</title>

            <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
            <script src="jquery-ui.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
            <link rel="stylesheet" href="jquery-ui.css">
        <!--  <script src="jquery-1.10.2.js"></script> -->

           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" >
           <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>

          <link rel="stylesheet" href="style.css">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
       </head>

                  <div class = "row">
                <div class = "col-md-12">
                <div class="wrapper4">
                <p style = "text-align:center">
                Subject Skill
                </p>
                <input id="ex16" data-slider-id='ex16Slider' type="text" data-slider-min="0" data-slider-max="100"  data-slider-step="1" style="width: 100%; text-align:center;"/>

                 </div>
                </div>

                <div class = "col-md-12">
                <div class = "col-md-4">

                <div class="wrapper">
                <hr />
                <p>
                Technical / Analytical
                </p>

                <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step="1" style="text-align: center"/>
                    <hr />
                    <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex17" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex18" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />

                </div>
                </div>

                <div class = "col-md-4">

                <div class="wrapper">
                <hr />
                <p>
                Problem Solving
                </p>

                    <input id="ex6" data-slider-id='ex6Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step="1" />
                    <hr />
                    <input id="ex7" data-slider-id='ex7Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex8" data-slider-id='ex8Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex9" data-slider-id='ex9Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex10" data-slider-id='ex10Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />

                </div>

                </div>

                <div class = "col-md-4">
                <hr />
                <div class="wrapper">
                <p>
                Communication
                </p>

                    <input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step="1" />
                    <hr />
                    <input id="ex12" data-slider-id='ex12Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex13" data-slider-id='ex13Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex14" data-slider-id='ex14Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex15" data-slider-id='ex15Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />

                </div>

                </div>
                </div>

                            </body>
                            </html>

sli.js

       <script>
        $('#ex1').slider({
            value : 26,
            formatter: function(value) {
                return 'ABCD: ' + value;
            }
        });


        $('#ex2').slider({
            value : 2,
            tooltip_position:'bottom',
             reversed : true,
            formatter: function(value) {
                return 'A: ' + value;
            }
        });


        $('#ex3').slider({
            value : 6,
            reversed : true,
            formatter: function(value) {
                return 'B: ' + value;
            }
        });


        $('#ex4').slider({
            value : 8,
             reversed : true,
            formatter: function(value) {
                return 'C: ' + value;
            }
        });


        $('#ex5').slider({
            value : 4,
             reversed : true,
            formatter: function(value) {
                return 'D: ' + value;
            }
        });

        $('#ex17').slider({
            value : 2,
             reversed : true,
            formatter: function(value) {
                return 'D: ' + value;
            }
        });

        $('#ex18').slider({
            value : 5,
             reversed : true,
            formatter: function(value) {
                return 'D: ' + value;
            }
        });


        $('#ex6').slider({
            value : 24,
            formatter: function(value) {
                return 'EFGH: ' + value;
            }
        });


        $('#ex7').slider({
            value : 9,
             reversed : true,
            formatter: function(value) {
                return 'E: ' + value;
            }
        });


        $('#ex8').slider({
            value : 5,
            reversed : true,
            formatter: function(value) {
                return 'F: ' + value;
            }
        });


        $('#ex9').slider({
            value : 3,
             reversed : true,
            formatter: function(value) {
                return 'G: ' + value;
            }
        });


        $('#ex10').slider({
            value : 7,
             reversed : true,
            formatter: function(value) {
                return 'H: ' + value;
            }
        });


        $('#ex11').slider({
            value : 34,
            formatter: function(value) {
                return 'EFGH: ' + value;
            }
        });


        $('#ex12').slider({
            value : 8,
             reversed : true,
            formatter: function(value) {
                return 'E: ' + value;
            }
        });


        $('#ex13').slider({
            value : 5,
            reversed : true,
            formatter: function(value) {
                return 'F: ' + value;
            }
        });


        $('#ex14').slider({
            value : 10,
             reversed : true,
            formatter: function(value) {
                return 'G: ' + value;
            }
        });


        $('#ex15').slider({
            value : 11,
             reversed : true,
            formatter: function(value) {
                return 'H: ' + value;
            }
        });

        $('#ex16').slider({
            value : 84,
            formatter: function(value) {
                return 'ABCDEFGH: ' + value;
            }
        });

        // If you want to change slider using Sub-Skills
        $("#ex2,#ex3,#ex4,#ex5,#ex17,#ex18").on("slide", function() {
        $('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex17').slider('getValue')+ $('#ex18').slider('getValue'));
        });

        // If you want to change slider using Sub-Skills
        $("#ex7,#ex8,#ex9,#ex10").on("slide", function() {
        $('#ex6').slider('setValue', $('#ex7').slider('getValue') + $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue'));
        });

        // If you want to change slider using Sub-Skills
        $("#ex12,#ex13,#ex14,#ex15").on("slide", function() {
        $('#ex11').slider('setValue', $('#ex12').slider('getValue') + $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue'));
        });

        // If you want to change slider using Main Skills
        $("#ex2,#ex3,#ex4,#ex5,#ex7,#ex8,#ex9,#ex10,#ex12,#ex13,#ex14,#ex15").on("slide", function() {
        $('#ex16').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex7').slider('getValue')+ $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue')+ $('#ex12').slider('getValue')+ $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue'));
        });

控制台没有错误，我已经包含了几乎所有必要的文件，包括 css。但仍然只有框是可见的，而不是滑块。

您能否指出，可能是什么错误，因为我已经为此苦苦挣扎了很多天。

score 0 · Accepted Answer

尝试在 chrome 上运行此代码，它对我来说工作正常

<html lang="en">
  <head>
  <meta charset="utf-8">
 <title>jQuery UI Slider - Multiple sliders</title>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" >
           <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function(){

 $('#ex1').slider({
            value : 26,
            formatter: function(value) {
                return 'ABCD: ' + value;
            }
        });


        $('#ex2').slider({
            value : 2,
            tooltip_position:'bottom',
             reversed : true,
            formatter: function(value) {
                return 'A: ' + value;
            }
        });


        $('#ex3').slider({
            value : 6,
            reversed : true,
            formatter: function(value) {
                return 'B: ' + value;
            }
        });


        $('#ex4').slider({
            value : 8,
             reversed : true,
            formatter: function(value) {
                return 'C: ' + value;
            }
        });


        $('#ex5').slider({
            value : 4,
             reversed : true,
            formatter: function(value) {
                return 'D: ' + value;
            }
        });

        $('#ex17').slider({
            value : 2,
             reversed : true,
            formatter: function(value) {
                return 'D: ' + value;
            }
        });

        $('#ex18').slider({
            value : 5,
             reversed : true,
            formatter: function(value) {
                return 'D: ' + value;
            }
        });


        $('#ex6').slider({
            value : 24,
            formatter: function(value) {
                return 'EFGH: ' + value;
            }
        });


        $('#ex7').slider({
            value : 9,
             reversed : true,
            formatter: function(value) {
                return 'E: ' + value;
            }
        });


        $('#ex8').slider({
            value : 5,
            reversed : true,
            formatter: function(value) {
                return 'F: ' + value;
            }
        });


        $('#ex9').slider({
            value : 3,
             reversed : true,
            formatter: function(value) {
                return 'G: ' + value;
            }
        });


        $('#ex10').slider({
            value : 7,
             reversed : true,
            formatter: function(value) {
                return 'H: ' + value;
            }
        });


        $('#ex11').slider({
            value : 34,
            formatter: function(value) {
                return 'EFGH: ' + value;
            }
        });


        $('#ex12').slider({
            value : 8,
             reversed : true,
            formatter: function(value) {
                return 'E: ' + value;
            }
        });


        $('#ex13').slider({
            value : 5,
            reversed : true,
            formatter: function(value) {
                return 'F: ' + value;
            }
        });


        $('#ex14').slider({
            value : 10,
             reversed : true,
            formatter: function(value) {
                return 'G: ' + value;
            }
        });


        $('#ex15').slider({
            value : 11,
             reversed : true,
            formatter: function(value) {
                return 'H: ' + value;
            }
        });

        $('#ex16').slider({
            value : 84,
            formatter: function(value) {
                return 'ABCDEFGH: ' + value;
            }
        });

        // If you want to change slider using Sub-Skills
        $("#ex2,#ex3,#ex4,#ex5,#ex17,#ex18").on("slide", function() {
        $('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex17').slider('getValue')+ $('#ex18').slider('getValue'));
        });

        // If you want to change slider using Sub-Skills
        $("#ex7,#ex8,#ex9,#ex10").on("slide", function() {
        $('#ex6').slider('setValue', $('#ex7').slider('getValue') + $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue'));
        });

        // If you want to change slider using Sub-Skills
        $("#ex12,#ex13,#ex14,#ex15").on("slide", function() {
        $('#ex11').slider('setValue', $('#ex12').slider('getValue') + $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue'));
        });

        // If you want to change slider using Main Skills
        $("#ex2,#ex3,#ex4,#ex5,#ex7,#ex8,#ex9,#ex10,#ex12,#ex13,#ex14,#ex15").on("slide", function() {
        $('#ex16').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue')+ $('#ex7').slider('getValue')+ $('#ex8').slider('getValue')+ $('#ex9').slider('getValue')+ $('#ex10').slider('getValue')+ $('#ex12').slider('getValue')+ $('#ex13').slider('getValue')+ $('#ex14').slider('getValue')+ $('#ex15').slider('getValue'));
        });

});
</script>

</head>
<body>
  <div class = "row">
                <div class = "col-md-12">
                <div class="wrapper4">
                <p style = "text-align:center">
                Subject Skill
                </p>
                <input id="ex16" data-slider-id='ex16Slider' type="text" data-slider-min="0" data-slider-max="100"  data-slider-step="1" style="width: 100%; text-align:center;"/>

                 </div>
                </div>

                <div class = "col-md-12">
                <div class = "col-md-4">

                <div class="wrapper">
                <hr />
                <p>
                Technical / Analytical
                </p>

                <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step="1" style="text-align: center"/>
                    <hr />
                    <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex17" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex18" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />

                </div>
                </div>

                <div class = "col-md-4">

                <div class="wrapper">
                <hr />
                <p>
                Problem Solving
                </p>

                    <input id="ex6" data-slider-id='ex6Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step="1" />
                    <hr />
                    <input id="ex7" data-slider-id='ex7Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex8" data-slider-id='ex8Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex9" data-slider-id='ex9Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex10" data-slider-id='ex10Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />

                </div>

                </div>

                <div class = "col-md-4">
                <hr />
                <div class="wrapper">
                <p>
                Communication
                </p>

                    <input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="80"  data-slider-step="1" />
                    <hr />
                    <input id="ex12" data-slider-id='ex12Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex13" data-slider-id='ex13Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex14" data-slider-id='ex14Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />
                <input id="ex15" data-slider-id='ex15Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-orientation="vertical" />

                </div>

                </div>
                </div>
</body>
</html>

javascript - 滑块在浏览器中显示类似框，但在 Fiddle 中工作正常（控制台中无错误显示）

1 回答 1

Related

Reference