javascript - 查询选择器类在数字验证中不起作用

Question

我在 JavasCript 中有一个数字验证。只在一个输入数字中工作得很好，但我需要一些输入的验证，我试图用 jquery 选择器类来做到这一点，但它只验证其中一个。我该怎么做？

HTML:

<input id="dsa" type="number" class="css" min="0" max="10" />
<input id="dsa1" type="number" class="css" min="0" max="10" />
<input id="dsa2" type="number" class="css" min="0" max="10" />

JavaScript/Jquery

var input = document.querySelector('.css');
input.onkeyup = function testNums(evt) { 
var num = parseInt(evt.target.value, 10);

 if(typeof num === "number" && num < 11 && num > -1){
   evt.target.value = num
 }

 else{
  evt.target.value = ''
 }  


};

http://jsfiddle.net/NL43y/

提前致谢。

Answer 1

要选择超过 1 个元素，请使用 querySelectorAll - 然后您必须循环并绑定(bind)每个元素，或使用 jQuery(如标记)

$(".css").keyup(function(evt) {
    //code
});

或循环(http://jsfiddle.net/NL43y/1/)

var input = document.querySelectorAll('.css');
for (var i = 0; i < input.length; i++) {
    input[i].onkeyup = function testNums(evt) { 
        var num = parseInt(evt.target.value, 10);
        if(typeof num === "number" && num < 11 && num > -1){
            evt.target.value = num
        } else {
            evt.target.value = ''
        }  
    };
}