JQuery 滑块不可见但可以正常工作

Posted 2023-05-08

【中文标题】JQuery 滑块不可见但可以正常工作

【英文标题】：JQuery Slider Invisible But Otherwise Working

【发布时间】：2017-02-06 16:11:11

【问题描述】：

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

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

HTML

<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）上，滑块不显示。滑块仍然有效，但显示为不可见。通过单击 javascript 旁边的齿轮，取消选中 jQuery UI 1.9.2，然后重新运行，我的问题在 jsfiddle 上是可重复的（如此处所示：http://jsfiddle.net/RwfFH/142/）

我的 html 头中包含 jquery.min.js 和 jquery-ui.min.js，所以我不确定问题出在哪里。

是不是和jQuery没有及时加载有关？我正在使用window.addEventListener('DOMContentLoaded', main, false );，其中 main 中有我的滑块代码。

【问题讨论】：

@blgt woohoo 成功了！请写一个答案，说在 html （或类似的）中包含 ，我会接受。谢谢！

我意识到我应该在输入答案后发布：)。现已发布

【参考方案1】：

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

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

（替换为合适的版本）

您的小提琴与http://jsfiddle.net/7arrsaro/ 中链接的 .css 文件工作正常