jQUERY单独添加和删除类

jQUERY adding and removing class individually

本文关键字：删除 添加 单独 jQUERY      更新时间：2023-09-26

我创建了一个表格，点击这里查看。该表单由基本验证功能、一个字符检查和验证数字字段组成。验证检查后，它会添加类valid（绿色）或invalid（红色）

在"可以在我的演示中看到"的那一刻，当用户填写输入时，我的验证检查会激活所有输入字段，而不是一次激活一个。

代码片段 

var validInput = function(fieldName) {
    $(fieldName).css({
        "background-color": "rgba(229,254,205)"
    });
};
var inValidInput = function(fieldName) {
    $(fieldName).css({
        "background-color": "rgba(229,254,205)"
    })
};
// VALIDATOR FUNCTION FOR CHARACTERS
$('.characters').focusout(function() {
    var letters = /^[a-zA-Z's]+$/;
    if ($(this).val().match(letters)) {
        validInput('.characters');
        $('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)");
        $('.invalid-checked').removeClass("invalid");
    } else {
        $('.invalid-checked').addClass("invalid").css("color", "rgba(255, 0, 0, 0.92)");
        $('.valid-checked').removeClass("checked");
    }
});
指出

你的几个错误，

1） validInput('.characters'); 不要使用类验证所有输入.characters仅验证触发事件的此输入。所以必须validInput(this);，将元素传递给函数。

2) $('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)");
            $('.invalid-checked').removeClass("invalid");

这里不要更改所有有效和无效图标的 css。仅将更改应用于在<div class="protect-field planner-form">内使用此输入包装的图标 因此，从输入元素跟踪此包装器div，然后追溯到图标并仅更改它们。

var validInput = function(fieldName) {
    $(fieldName).css({
        "background-color": "rgba(229,254,205)"
    });
};
var inValidInput = function(fieldName) {
    $(fieldName).css({
        "background-color": "rgba(229,254,205)"
    })
};
// VALIDATOR FUNCTION FOR CHARACTERS
$('.characters').focusout(function() {
    var letters = /^[a-zA-Z's]+$/;
    var $inputWrapper = $(this).closest('.planner-form'); //get the wrapper of the input
    if ($(this).val().match(letters)) {
        validInput(this); //pass this input element to validate 
        // Trace down the appropriate icons and change.
        $inputWrapper.find('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)");
        $inputWrapper.find('.invalid-checked').removeClass("invalid");
    } else {
        $inputWrapper.find('.invalid-checked').addClass("invalid").css("color", "rgba(255, 0, 0, 0.92)");
        $inputWrapper.find('.valid-checked').removeClass("checked");
    }
});

在调用 validInput 函数时必须使用 $（this）。

此外，您需要在 $（this） 上使用 .siblings 方法，而不是使用 $（'.valid-checked'） 等。

添加 css 

.checked {
   display: inline;
}
.invalid {
   display: inline;
}

使用this .

validInput(this);//instead the class referance.

然后更改显示隐藏图标的代码，例如使用closest()。

$(this).closest('.protect-field').find('.valid-checked');

演示

你有太多的代码，过于复杂的html。

http://codepen.io/anon/pen/yOOPgW

$(document).ready(function(){
  $('#validateForm input').focusout(function(){
    if($(this).hasClass('characters'))
        {
          if($(this).val() != 'a'){
            $(this).next('.checker').css("background-color", "red").addClass('invalid');
          } //change this
        }
      else
        {
          if($(this).val() != 12345){
            $(this).next('.checker').css("background-color", "red").addClass('invalid');
          }
        }
  });
});

显然不会为你做这一切，但这是你需要的一般想法。

据我所知，您的问题是您的数字验证功能失败。每个文本框都单独评估。这应该可以修复您的验证器：

  $('.numbers').focusout(function() {
    var numbers = /^[-+]?'d+$/;
    if ($(this).val().match(numbers)) {
      validInput('.numbers');
      $('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)");
      $('.invalid-checked').removeClass("invalid");
    } else {
      $('.invalid-checked').addClass("invalid").css("color", "rgba(255, 0, 0, 0.92)");
      $('.valid-checked').removeClass("checked");
    }
});

另一个问题是第一个孩子名称的文本框正在使用数字类，该类实际上应该是您的字符类。

相关文章：