如何在jquery变量中访问移动滑块的值

时间:2014-08-19 16:17:21

标签: javascript jquery jquery-ui

html

<h1>HTML Slider Test</h1>
<div class="slider" data-max="10"></div>
<p>Your slider has a value of <span class="slider-value"></span></p>
<div class="slider" data-max="100"></div>
<p>Your slider has a value of <span class="slider-value"></span></p>

jquery的

$(".slider").each(function() {
$(this).slider({
    value : 1,
    min   : 1,
    max   : $(this).data('max'),
    step  : 1,
    slide : function (event, ui) {
       var a= $(this).next().find('span.slider-value').html(ui.value);
    }
  });
 });

我想在jquery变量中移动滑块的值 http://jsfiddle.net/s7uxtbu7/5/

1 个答案:

答案 0 :(得分:0)

有很多方法可以做到这一点。如果要在将值应用于html元素的同时将滑块的值分配给JavaScript中的变量,则可以执行以下操作:

var a = 0;
$(".slider").each(function() {
    $(this).slider({
        value : 1,
        min   : 1,
        max   : $(this).data('max'),
        step  : 1,
        slide : function (event, ui) {
           a = ui.value;
           $(this).next().find('span.slider-value').html(ui.value);
        }
    });
});
setInterval(function(){
    alert(a);
},3000);

在您的示例中,您正在幻灯片功能中初始化a,因此它在函数外部不可用。您还将a变量分配给jQuery setter,该setter返回dom元素而不是值。为了获得你需要做的事情,比如

a = $(this).next().find('span.slider-value').html(ui.value).html();

这是以下众多替代方案之一:

a = ui.value;
$(this).next().find('span.slider-value').html(ui.value);

如上面第一个例子中所示。