Looping through JQuery Id's

Looping through JQuery Id's

本文关键字：Id through JQuery Looping      更新时间：2023-09-26

我的任务是使用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"、"#1inputFour"）.css（"border color"、"red"）；但不起作用

你几乎做到了：

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

注意CSS选择器是如何一个字符串的。就像样式表中的CSS规则一样，您可以使用逗号分隔多个要匹配的选择器。

不要将每个类放在单独的引号中，而是将所有类放在一个引号中。

试试这个：

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

如果您可以更改选择器名称，您可以这样做。

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

为什么要这样做而不为输入生成validator？

它的工作原理就像您所说的(和)之间有多个选择器，但您必须这样放置它们：

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

您还可以组合不同类型的选择器：

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

查看此小提琴

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

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

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

相关文章：