Question

我正在尝试创建一个小的jquery脚本，用于测试在键入时是否在字段中输入了任何数字。如果没有，则在字段下方会出现一个警告框，其中包含.after（），如果有人输入了数字 - >警告框将消失。

脚本工作正常，但我不能让它只运行.after（）一次。它完全忽略了我的“显示”变量，因为我显然做错了什么。结果是在输入字段中键入的每个非数字字符的.after（）中运行，并出现一堆警告框。

$("#checkout_shipping_address_address1").on("input", function() {
  var val = $("#checkout_shipping_address_address1").val();
  var matches = val.match(/\d+/g);
  var displayed = false;

  if ((matches == null) && (displayed != true)) {
    displayed = true;
    $("#checkout_shipping_address_address1").after("<div class='number-warning' style='border-radius: 5px; margin-bottom: 7px; margin-top: 5px; padding: 10px; border: 1px solid rgb(229, 148, 0); color: rgb(229, 148, 0); background-color: rgb(255, 246, 229);'>Geen huisnummer opgegeven</p>");
    return false;
  } else {
    $(".number-warning").hide();
  }
});

Answer 1

这为我解决了这个问题：

      var displayed = false;
      var val = $("#checkout_shipping_address_address1");
      $(val).on("input", function() {
        var valmatches = $(val).val();
        var matches = valmatches.match(/\d+/g);
          if ( (matches == null) && (displayed == false) ) {
              displayed = true;
              $(val).after("<div class='number-warning' style='border-radius: 5px; margin-bottom: 7px; margin-top: 5px; padding: 10px; border: 1px solid rgb(229, 148, 0); color: rgb(229, 148, 0); background-color: rgb(255, 246, 229);'>Geen huisnummer opgegeven</p>");

          } if ( (matches != null) && (displayed == true) ) {
            displayed = false;
              $(".number-warning").hide();

          }
      });
     });

Answer 2

您的if-else构造不太正确，每次匹配时，它都会隐藏警告。我改变了这一点，并且我将on函数中的事件更改为keyup，因为这会在每次发布密钥后触发。

$("#checkout_shipping_address_address1").on("keyup",function() {
var matches= $(this).val().match(/\d+/g);
if (matches == null) {
  if ($('.number-warning').show().length==0){
     $(this).after("<div class='number-warning' style='border-radius: 5px; margin-bottom: 7px; margin-top: 5px; padding: 10px; border: 1px solid rgb(229, 148, 0); color: rgb(229, 148, 0); background-color: rgb(255, 246, 229);'>Geen huisnummer opgegeven</p>");
  return false;}
 } else {
   $(".number-warning").hide();
 }
});

我还在案例的脚本中添加了show()方法，之前添加的警告标签仍然存在但需要重新激活，因为match - 条件。在这种情况下，它只需要是“show() n”，但不会再次附加。

通常，将.append()部分包含在输入检查部分中并不是一个好主意。最好定义一次，然后隐藏或显示它。

Jquery忽略if语句的变量

2 个答案: