Цитирование через JQuery Id's

Question

У меня есть задача установить цвет границы полей входов по ошибке на красный с помощью jquery. Я сделал это, но я не хочу повторять. Есть ли способ сделать это короче, а также как настроить цвет на зеленый, когда значения вводятся в поля ввода. Thnx

Javascript Код

if (err !== 0){ 

    $("#inputOne").css("border-color", "red"); 
    $("#inputTwo").css("border-color", "red"); 
    $("#inputThree").css("border-color", "red"); 
    $("#inputFour").css("border-color", "red"); 

    //If there are errors, alert the user and return false 
    $.notify("Please fill fields with *!", 
     { 
      position: 'bottom right', 

     } 
    ); 
    return false; 
} 

Я пытался $ ("# inputOne", "#inputTwo", "#inputThree", "#inputFour"). CSS ("граница цвета", "красный"); но не работает

Answer 1

Вы были почти там:

$("#inputOne,#inputTwo,#inputThree,#inputFour").css("border-color", "red"); 

Обратите внимание, как селектор CSS является одна строка. Подобно правилам CSS в таблице стилей, вы можете использовать запятую для разделения нескольких селекторов для соответствия.

Answer 2

Вместо того чтобы помещать каждый класс в отдельные кавычки, поместите весь класс в одинарной кавычки.

Попробуйте это:

$("#inputOne, #inputTwo, #inputThree, #inputFour").css("border-color", "red"); 

Answer 3

, если вы можете изменить имена селекторов вы можете сделать это, как это.

var numberOFinputs = 5; 

for (var i = 0; i < numberOFinputs; i++) { 
    $("#input_"+i).css("border-color", "red"); 
} 

Answer 4

Почему вы это делаете и не делая validator для ваших входов?

Он работает, как вы сказали, с множеством селекторов между ( и ), но вы должны поставить их так:

$('#el1,#el2,#el3') // note that I don't have multiple strings between parantheses, just one 

Вы также можете комбинировать различные типы селекторов:

$("#el1,.el2,input[name='test']") 

Посмотреть THIS fiddle

Если вы хотите создать «валидатор» без использования плагина, просто o ne может выглядеть так:

$('form').submit(function(e){ 
    e.preventDefault(); 

    var isValid=true; 
    var error; 

    $('form input').each(function(){ 
     var $el=$(this); 
     var elementData = $el.data(); 
     var value = $el.val(); 

     if(elementData.isRequired){ 
     // do something here 
     } 

     if(elementData.minLength){ 
     // do something here 
     } 
    }); 

}); 




<form> 

FirstName:<input type='text' name='FirstName' data-isrequired='true' /> <br /> 
LastName: <input type='text' name='LastName' data-isrequired='true' /> <br /> 
UserName: <input type='text' name='Username' data-isrequired='true' data-minLength='3'/> <br /> 

<input type='submit' value='Validate'/> 

</form> 

Обратите внимание, что код, приведенный выше, является чем-то очень простым, что может быть улучшено. Он используется только для этого вопроса, например.