.val 输入调整 HTML 但不改变控制台中的值

Question

我正在尝试使用 JavaScript 和 jQuery 的 val 方法来验证范围输入类型。 它输出到 HTML 很好，但不会在控制台中记录对值的更改（当滑块移动时，控制台的日志保持在 5）

http://jsfiddle.net/mx6QY/1/

HTML

<input type="range" min="1" max="10" step="1" value="5" id="slider" />
<div id="output"></div>

JavaScript

  $(function(){  
    var val = $('#slider').val();  
        output  = $('#output');  

    output.html(val);  

    $('#slider').change(function(){  
        output.html(this.value); 
    });

    console.log(val);
    if(val === 1) {
      console.log('test');
    }

});

Answer 1

将记录器放入事件处理函数中：

$('#slider').change(function(){
    var val = this.value;
    output.html(val); 
    console.log(val);
    if(val === 1) {
          console.log('test');
    }
});

Answer 2

将console.log()放在change事件处理程序中。

  $(function(){  
    var val = $('#slider').val();  
        output  = $('#output');  
        output.html(val);  

    $('#slider').change(function(){  
        output.html(this.value);
        console.log(this.value);
        if(this.value == 1) {
          console.log('test');
        }
    });
});

演示： http : //jsfiddle.net/mx6QY/4/