Question

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

我想要的只是一个简单的滑块，所以我使用了上面这个脚本虽然稍微剥了一下，但我得到了一个未定义的错误。有人可以帮我这个。

这是我得到的。

＆＃13;

$(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>');
      }

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您正在执行var $amount = slider == 1?val:$("#amount").val();，但在HTML中我没有看到具有属性id=amount的项目。可能还有其他问题，但这是第一个问题。（如果你不熟悉jquery，$（＆＃34;＃amount＆＃34;）意味着获取ID为amount的HTML元素;如果没有，则返回undefined，它没有＆＃34; val＆＃34;方法。（另外，我不喜欢将$ 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中的值。但#jount对象不是在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;

理想情况下，您不希望使用init逻辑重载update（）函数。所以这样可以保持清洁。

Jquery Slider - ＆＃39; undefined＆＃39;错误

2 个答案: