jquery ui 小部件显示为文本输入答案

【问题标题】：jquery ui widget displaying as a text inputjquery ui 小部件显示为文本输入
【发布时间】：2014-07-19 23:37:56
【问题描述】：

我正在尝试制作像 http://jqueryui.com/slider/#range 这样的范围小部件。我已经复制了源代码，结果是文本输入而不是滑块。这是我正在使用的代码。此外，我将样式属性移动到链接的 css 文件中。这样做的输出从无变为文本输入。

这是我的头：

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <script src="../jscript/questions.js"></script>
  <script>
     jQuery.noConflict()
  $(function() {
    $('#slider-range').slider({
      range: true,
      min: 25,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        jQuery( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    jQuery( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + jQuery( "#slider-range" ).slider( "values", 1 ) );
  });
  </script>
  <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,900,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="../CSS/questions.css">
</head>

这是小部件的 html：

<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount"  >
</p>

<div id="slider-range"></div>

这是 CSS：

#slider-range{
  border:0;
  color:#f6931f; 
  font-weight:bold;
}

谢谢！

【问题讨论】：

控制台有错误吗？一些相对网址可能是您的问题。

标签： javascript jquery jquery-ui jquery-ui-slider jquery-ui-widget

【解决方案1】：

您的问题源于声明jQuery.noConflict()

这样做您将无法再使用$ 直接访问jQuery

如果您需要noConflict，您可以通过更改来修复您的代码：

jQuery.noConflict()
$(function() {

到

jQuery.noConflict()
jQuery(function($) {/* "$" argument allows using "$" inside the ready handler*/

Working demo of your code

了解如何使用浏览器控制台检查错误。您应该会看到 "$" is not defined 或类似错误，具体取决于浏览器

【讨论】：

【解决方案2】：

jQuery.noConflict()

放弃 $ 变量，以便在未分配后调用它。

文档 http://api.jquery.com/jquery.noconflict/

工作小提琴 http://jsfiddle.net/rniemeyer/MfegM/

【讨论】：