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

我尝试过$（＆＃34; #inputOne＆＃34;，＆＃34; #inputTwo＆＃34;，＆＃34; #inputThree＆＃34;，＆＃34; #inputFour＆＃34;）。css（＆＃34; border-color＆＃34;，＆＃34; red＆＃34;）;但是没有用？

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小提琴

如果你想在不使用插件的情况下建立一个'验证器'，一个简单的插件可能如下所示：

$('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>

请注意，上面的代码非常简单，可以进行很多改进。作为一个例子，它仅用于这个问题。

循环使用JQuery Id＆＃39; s

4 个答案: