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

Question

我在我的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一起使用有冲突吗？

Answer 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; 
});