HTML范围输入增加/减少值问题

时间:2016-10-10 17:27:04

标签: javascript jquery html

我的HTML中有这三个元素:

<button id="left" >Föregående</button>
<input id="animSlider" type="range" min="0" max="0" step="1" value="0" /> //THE MAX VALUE IS SET DYNAMICLY ON PAGE LOAD, I.E. NOT ZERO
<button id="right">Nästkommande</button>

控制输入滑块的值是jquery中的这两个侦听器/处理程序:

$('#left').click( function () {
document.getElementById("animSlider").value -= 1;
});

$('#right').click( function () {
document.getElementById("animSlider").value += 1; 
});

由于某种原因,“previous”(#left)的处理程序工作正常,它将值减1。但是,“下一个”(#right)处理程序,值增加如下:1,2,滑块中间,滑块结束。我知道,我的代码中可能存在一些冲突,我没有发布,但我已经检查过,找不到任何连接。唯一涉及价值的地方是这两个处理程序!

所以我的问题是:在处理范围输入值时是否存在我缺少的东西? JavaScript中的+ = / - =是不同的?以这种方式将jQuery与JavaScript一起使用是否存在冲突?

1 个答案:

答案 0 :(得分:1)

Demo

值为String。将其转换为数字。否则增加为 0,01,011 ...代替0,1,2..。但-减去自动将字符串转换为数字,因为string - string没有意义。这就是为什么只有前一个按钮正在工作。Number(string);将字符串隐藏到一个数字。你也可以使用parseInt(string)

$('#right').click(function() {
  document.getElementById("animSlider").value = Number(document.getElementById("animSlider").value)+1;
});