jQuery從$（「input」）數組獲得輸入val（）

Question

我有一個函數，返回表單中每個文本輸入是否有值。

當我第一次做它看起來像這樣的功能：

function checkInput(inputId) { 
check = 0;   //should be 0 if all inputs are filled out 
for (var i=0; i < arguments.length; i++) { // get all of the arguments (input ids) to check 
    var iVal = $("#"+arguments[i]).val(); 

    if(iVal !== '' && iVal !== null) { 
    $("#"+arguments[i]).removeClass('input-error'); 
    } 
    else { 
    $("#"+arguments[i]).addClass('input-error'); 
    $("#"+arguments[i]).focus(function(){ 
     $("input").removeClass('input-error'); 
     $("#"+arguments[i]).off('focus'); 
    }); 
    check++; 
    } 

} 

    if(check > 0) { 
    return false; // at least one input doesn't have a value 
    } 
    else { 
    return true; // all inputs have values 
    } 

} 

這工作得很好，但是當我打電話的功能，我將不得不包括（作爲arstrong textgument）每個輸入我想要的ID待檢查：checkInput('input1','input2','input3')。

---

現在我試圖讓我的功能檢查頁面上的每個輸入，而不必包含每個輸入ID。

這是我到目前爲止有：

function checkInput() { 
    var inputs = $("input"); 
    check = 0; 
    for (var i=0; i < inputs.size(); i++) { 
     var iVal = inputs[i].val(); 

    if(iVal !== '' && iVal !== null) { 
    inputs[i].removeClass('input-error'); 
    } 
    else { 
    inputs[i].addClass('input-error'); 
    inputs[i].focus(function(){ 
     $("input").removeClass('input-error'); 
     inputs[i].off('focus'); 
    }); 
    check++; 
    } 

} 

if(check > 0) { 
    return false; 
} 
else { 
    return true; 
} 

} 

當我把它返回此錯誤的功能：

Uncaught TypeError: inputs[i].val is not a function

我在做什麼錯？

Answer 1

當你輸入[i]時，這會返回一個html元素，所以它不再是一個jquery對象。這就是爲什麼它不再具有這種功能。

嘗試用$（）像$（輸入[1]）包裝它來獲得jQuery對象，然後調用.VAL（），如：

$(inputs[i]).val() 

如果你打算用這個你for循環，只是把它作爲一個變量：

var $my_input = $(inputs[i]) 

然後繼續與其他方法在循環中使用它：

$my_input.val() 
$my_input.addClass() 

等。

Answer 2

這實際上是一個非常簡單的修復。您需要將的jQuery構造內包你的jQuery對象，如用於inputs[i].val()$()

到$(inputs[i]).val();

以下是完整的工作示例：

http://jsbin.com/sipotenamo/1/edit?html,js,output

希望幫助！

Answer 3

這正是.eq()方法的作用之一。而不是使用inputs[i]，使用以下命令：

// Reduce the set of matched elements to the one at the specified index. 
inputs.eq(i) 

Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set.

Answer 4

，如果你使用jquery .each()功能，你可以做到這一點清潔：

$(document).ready(function() { 
 
    $('.submit').on('click', function() { 
 
     $('input').each(function() { 
 
      console.log('what up'); 
 
      if($(this).val().length < 1) { 
 
       $(this).addClass('input-error'); 
 
      } 
 
      else { 
 
       $(this).removeClass('input-error'); 
 
      } 
 
     }); 
 
    }); 
 
});

.input-error { 
 
    background-color: pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" /><br/> 
 
<input type="text" /><br/> 
 
<input type="text" /><br/> 
 
<input type="text" /><br/> 
 
<input type="text" /><br/> 
 
<input type="text" /><br/> 
 
<input type="text" /><br/> 
 
<input type="text" /><br/> 
 
<input type="text" /><br/> 
 
<input type="text" /><br/> 
 
<br/> 
 
<a href="#" class="submit">SUBMIT</a>

Answer 5

在這種情況下， ，我會利用jQuery.each()函數循環表單元素。這將是修改後的代碼

function checkInput() { 
     var $inputs = $("input"), 
      check = 0; 
     $inputs.each(function() { 
      val = $.trim($(this).val()); 
      if (val) { 
       $(this).removeClass('input-error'); 
      } 
      else { 
       $(this).addClass('input-error'); 
       $(this).focus(function() { 
        $("input").removeClass('input-error'); 
        $(this).off('focus'); 
       }); 
       check++; 
      } 
     }); 
     return check == 0; 
    }