尝试使用JQuery - 编程之家

如何解决尝试使用JQuery

我正在尝试清除按键时的错误图标。

**编辑-添加HTML **

<input class="validate" type="text" data-type="string" id="address" />
<input class="validate" type="text" data-type="number" id="zip" />

**结束编辑-不确定这是否有助于阐明**

当前，使用此功能显示错误：

function validateFields(){

$(".validate").blur(function(){
    var status = "";
    var label = this.id;
    var value = this.value;

    if(value != ""){
        status = "good";
        console.log("status " + status);
    }
    else{
        status = "error";
        console.log("status " + status);
    }

    if(status == "good"){
        label.html(label.html()+' &#9989;');
    }
    if(status == "error"){
        label.html(label.html()+' &#10060;');
    }
  });
}

如果状态等于“错误”，则显示错误图标。

所以现在，我想清除用户按下键盘时的错误。这是我的尝试：

function clearError(){
$(".validate").keydown(function(){

    var datatype = $(this).data("type");
    var label = this.id;

    label.html(label.html()+' ');
  });
}

很明显，使用上面的keydown函数清除错误并没有成功。

我该如何进行这项工作？

解决方法

试图将文本保留在内部的标签业务不是很直观，因此我在标签上添加了跨度，以便从函数中的span中删除并添加错误符号。此外，您有一些不必要的代码可以在两个函数中删除。例如，您的if语句检查状态是不必要的，因为您已经检查了值是否为空（设置状态），因此可以将代码移到if语句中检查空值。

我们将每个对应的span的id设置为带有“ Span” id="testSpan"的输入的ID，因此JS函数可以轻松地对其进行访问。请记住，在jQuery函数this内部始终引用非jQuery对象，因此您可以在其上使用JS vanilla方法。

这是我能想到的：

$(".validate").blur(function () {
  var id = this.id; // get id

  if (this.value != "") { // check if input is empty
    document.getElementById(id + "Span").innerHTML = '&#9989;'; //set ok symbol
    console.log("good");
  } else {
    document.getElementById(id + "Span").innerHTML = '&#10060;'; // set error symbol
    console.log("error empty text");
  }
});

$(".validate").keydown(function () {
  // if value is empty set error symbol,otherwise nothing (keep ok symbol)
  if (this.value === "") document.getElementById(this.id + "Span").textContent = "";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="test">test<span id="testSpan"></span></label>
<input id="test" class="validate">

<label for="test2">test<span id="test2Span"></span></label>
<input id="test2" class="validate">