Jquery Slider - “未定义”错误

Question

所以我从bootsnip 得到了这个简单的脚本。

我想要的只是一个简单的滑块，所以我使用了上面的这个脚本，虽然把它删掉了一点，但我得到了一个未定义的错误。有人可以帮我解决这个问题。

这是我得到的。

$(document).ready(function() {
          $("#slider").slider({
              animate: true,
              value:1,
              min: 1,
              max: 10,
              step: 1,
              slide: function(event, ui) {
                  update(1,ui.value); //changed
              }
          });

          //Added, set initial value.
          $("#amount").val(0);
          $("#amount-label").text(0);
          
          update();
      });

      //changed. now with parameter
      function update(slider,val) {
        //changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
        var $amount = slider == 1?val:$("#amount").val();

        /* commented
        $amount = $( "#slider" ).slider( "value" );
        $duration = $( "#slider2" ).slider( "value" );
         */

         $('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
      }

.ui-widget-content {
    border: 1px solid #bdc3c7;
    background: #e1e1e1;
    color: #222222;
    margin-top: 4px;
}

.ui-state-default, .ui-widget-content .ui-state-default{
background:transparent !important;
border:none !important;
}
.ui-slider .ui-slider-handle label{
    background: #E68937;
    border-radius: 5px;
    width:5.2em;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 5.2em;
    height: 100px;
    cursor: default;
    margin: 0 -40px auto !important;
    text-align: center; 
    line-height: 35px;
    color: #FFFFFF;
    font-size: 15px;
    
}

.ui-slider .ui-slider-handle .glyphicon {
    color: #FFFFFF;
    margin: 0 3px; 
    font-size: 11px;
    opacity: 0.5;
}

.ui-corner-all {
    border-radius: 20px;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.9em;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    border: 1px solid #f9f9f9;
    background: #3498db;
}

.ui-slider-horizontal .ui-slider-handle {
    margin-left: -0.5em;
}

.ui-slider .ui-slider-handle {
    cursor: pointer;
}

.ui-slider a,
.ui-slider a:focus {
    cursor: pointer;
    outline: none;
}
.skill-slider {
    margin-bottom: 70px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

<div class="skill-slider">
  <div class="col-md-10 col-md-offset-1">
  <div id="slider"></div>
  </div>
</div>

Answer 1

您正在执行var $amount = slider == 1?val:$("#amount").val();，但在您的 HTML 中我没有看到具有属性 id=amount 的项目。可能还有其他问题，但这是第一个问题。 （如果你不熟悉 jquery，$("#amount") 表示获取 ID 为 amount 的 HTML 元素；如果没有，这将返回 undefined，它没有 "val" （另外，我不喜欢将 $varname 用于不是 jquery 对象的变量，但这是个人喜好 AFAIK）

Answer 2

如果您使用#amount div 来显示该值，那么您必须将其设置为最小值，即您提供给滑块的 1（而不是 0），如下所示：

替换

     $("#amount").val(0);

与

     $("#amount").val(1);

滑块不允许值超出最小、最大范围，但您似乎正在将其初始化超出范围。

这段漂亮的代码发生了什么？

    var $amount = slider == 1?val:$("#amount").val();

它检查参数（滑块）是否已传递给函数，如果没有，则将滑块值初始化为#amount 中存在的值。 在 update() 调用中，没有传递滑块值，因此它尝试读取 #amount 中的值。但是 #amount 对象不是在 html 中创建的。你的“UndefinedError”来自哪里。

另外，如果您不使用#amount div，那么在 document.ready() 函数中，您可以使用 update(1,1) 而不是空白 update() 来设置滑块的值无需读取#amount 对象的值；

这应该明确设置滑块的初始值：

替换

    update();

与

    update(1,1);

替换

    var $amount = slider == 1?val:$("#amount").val();

与

    var $amount = val;

理想情况下，您不希望使用初始化逻辑重载 update() 函数。 这样可以保持干净。