Jquery slider - 'undefined' 错误

Question

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

我想要的只是一个简单的 slider ，所以我使用了上面的脚本，尽管稍微精简了它，但我收到了未定义的错误。有人可以帮我解决这个问题吗？

这是我得到的。

$(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

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

替换

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

与

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

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

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

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

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

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

这应该明确设置 slider 的初始值:

替换

    update();

与

    update(1,1);

并替换

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

与

    var $amount = val;

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