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