JQuery滑动条不可见，但其他工作

JQuery Slider Invisible But Otherwise Working

本文关键字：其他 工作 JQuery      更新时间：2023-09-26

我在本地(桌面)html页面上使用jquery滑块，但我遇到滑块不显示的问题。

它应该看起来像这样，我写的:http://jsfiddle.net/RwfFH/143/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<span id="ColorScalerTitle">Color Scaling</span>
<div id="red">
    <span id="redScale">1</span>
</div>
<div id="green">
    <span id="greenScale">1</span>
</div>
<div id="blue">
    <span id="blueScale">1</span>
</div>
JAVASCRIPT

$( function() {
    function refreshValues() {
        var red = $( "#red" ).slider( "value" ),
            green = $( "#green" ).slider( "value" ),
            blue = $( "#blue" ).slider( "value" );
        document.getElementById("redScale").innerHTML=red/100;
        document.getElementById("greenScale").innerHTML=green/100;
        document.getElementById("blueScale").innerHTML=blue/100;
    }
    $( "#red, #green, #blue" ).slider({
        orientation: "horizontal",
        range: "min",
        max: 200,
        value: 100,
        slide: refreshValues,
        change: refreshValues
    });
    $( "#red" ).slider( "value", 100 );
    $( "#green" ).slider( "value", 100 );
    $( "#blue" ).slider( "value", 100 );
});
CSS

#ColorScalerTitle{
   float: left;
   margin-left: 120px;
}
#red, #green, #blue {
  float: left;
  clear: left;
  width: 300px;
  margin: 15px;
}
#redScale, #greenScale, #blueScale {
  margin-left: 320px;
}
#red .ui-slider-range,
#red .ui-slider-handle
{ background: #FF0000; }
#green .ui-slider-range,
#green .ui-slider-handle 
{ border-color: #00FF00; }
#blue .ui-slider-range,
#blue .ui-slider-handle 
{ border-color: #0000FF; }

但是在我的本地代码中(不使用jsfiddle)，滑块不显示。滑块仍然可以工作，但是显示为不可见。我的问题是重复在jsfiddle通过点击旁边的JAVASCRIPT齿轮，取消选中jQuery UI 1.9.2，并重新运行(见这里:http://jsfiddle.net/RwfFH/142/)

我包括jquery.min.js和jquery-ui.min.js在我的html头，所以我不确定问题是什么。

是否与jQuery没有及时加载有关?我使用window.addEventListener('DOMContentLoaded', main, false );，其中主要有我的滑块代码在它。

滑块部件依赖于插件的css表中定义的一些样式:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

(替换为相应版本)

你的小提琴工作得很好与。css文件链接在http://jsfiddle.net/7arrsaro/

相关文章：