javascript - HTML Range 输入增减值问题

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>

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

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

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

出于某种原因，“previous”(#left) 的处理程序工作正常，它将值减一。但是，“下一个”(#right) 处理程序的值会像这样增加:1,2， slider 中间， slider 末端。我知道，我的代码中可能存在一些冲突，我没有发布，但我已经检查过但找不到任何联系。唯一涉及值的地方是在这两个处理程序中!

所以我的问题是:在处理范围输入值时我是否遗漏了什么？是 +=/-= 在 JavaScript 中有所不同吗？以这种方式将 jQuery 与 JavaScript 一起使用是否有冲突？

Answer 1

Demo

值是一个字符串。将其转换为数字。否则它增加为0,01,011 ... 而不是 0,1,2.. 。但是 - minus 会自动将字符串转换为数字，因为 string - string 没有意义。这就是为什么只有上一个按钮起作用的原因。Number(string); 将字符串转换为数字。您也可以使用 parseInt(string)

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