Question

我有以下内容：

 <input id="slider-min" type="range" min="0" max="55" value="0" 
 step="5" onchange="sliderMinUpdate(this.value)">,

<div id="min_input">0</div>

<input id="slider-day" type="range" min="0" max="10" value="0" 
 step="0.5" onchange="sliderDayUpdate(this.value)">

function sliderDayUpdate(value){
  $('#slider-min').val(0);
}

function sliderMinUpdate(value){
$('#min_input').text(value);    
}

当我使用键盘专注于slider-min并向右或向左选择键盘时，它会正确更新min_input中的值。当我更改slider-day时，它会触发onChange并将值从slider-min更新为0，我可以看到它在我的页面中工作（滑块返回0）。当我选择slider-min的第一个增量时会出现问题，在这种情况下为5.当调用来自onChange的{{1}}时，它会正确地将slider-day更新为0，但是我从0移到5（slider-min）它不起作用。如果我继续移动它。

看起来状态5是在slider-min中维护的，所以当我设置slider-min时，滑块会更新，但当我从0更改为5时，不会调用$('#slider-min').val(0)

不知道发生了什么。

Answer 1

我对你的问题感到有些困惑，这个答案可能是错误的，无关紧要的，或者说太晚了，但我发现了一些与Chrome v23类似的东西（截至12/12/12）。据我所知，jQuery使用getAttribute（）和setAttribute（）与普通元素进行交互，但这些函数似乎不适用于＆lt; input type =＆＃34; range＆＃34;＆gt;。由于这里不需要jQuery（除了简化选择器），我建议使用普通的DOM document.getElementById（＆＃39; rangeElement＆＃39;）。value = x;获取/设置滑块的值。

Answer 2

你必须：

更改值
触发onchange事件。

我一直在使用jQuery + QUnit + FuncUnit来处理等待，但以下应该只需要jQuery。

$('input[type="range"]').val('0.5').trigger('change');

其中(min <= '0.5' => max)

Answer 3

我有一个类似的问题，但没有使用jQuery但D3.js.正如jimmetry在他的回答中已经说过的那样，jQuery似乎无法正确返回值一个<input type="range">。 D3.js似乎也是如此。

在我的情况下，这行代码没有返回更新的值，但总是返回初始值。

var min = $("#slider-min").attr("value");              // using jQuery
var min = d3.select("#slider-min").attr("value");      // using D3

使用老式的方式，令人惊讶的是总是返回更新的值：

var min = document.getElementById('slider-min').value;

输入类型=范围不更新其值

3 个答案: