javascript - 如何在更改时仅显示一次事件？

Question

我在 JS 中创建了一个函数来检查日期并将日期与用户的输入进行比较。

该函数在用户更改输入字段时运行。但是我遇到的问题是，当更改输入字段时日期不正确时，错误消息会停留两次或多次。这是因为函数计算会在每次更改时运行。

我怎么能说如果显示的错误消息发生变化，禁用第一个并在日期正确时删除错误消息。

    function calculate(){
  if (thereIsMissingValue())
        return

  let formDate = getFormDate()
    let comparisonDate = getComparisonDate()
    let formNewDate = getNewDate()

    let isOlderThanComparison = formDate < comparisonDate
    let isNewerThanToday = formDate > formNewDate

    if(isOlderThanComparison) {
      $('#next-button').prop('disabled', true);
      var $newdiv1 = $( "<div id='error-form' class='error-form'><p>Error text</p></div>" );
      $(".gform_page_fields").prepend($newdiv1);
    }else if(isNewerThanToday) {
      $('#next-button').prop('disabled', true);
      var $newdiv2 = $( "<div id='error-form' class='error-form'><p>Error text 2</p></div>" );
      $(".gform_page_fields").prepend($newdiv2);
    }else {
      $('#next-button').prop('disabled', false);
      $( "#error-form" ).remove();
    }
}


$('#day, #month, #year, #hour, #minute').change(function(){
    calculate();
});

尝试过

$('#day, #month, #year, #hour, #minute').one("change",function(){
    calculate();
});

但是函数只运行一次

Answer 1

在页面中包含错误文本 div 更有意义，但隐藏起来，然后您可以在需要时显示/隐藏它。这样，它改变状态的频率并不重要——只会出现 1 个错误，并且它始终是相关的(或隐藏的)...

var $error = $("#error-form");

if(isOlderThanComparison) {
    $('#next-button').prop('disabled', true);
    $error.html("<p>Error text</p>");
    $error.show();
}
else if(isNewerThanToday) {
    $('#next-button').prop('disabled', true);
    $error.html("<p>Error text 2</p>");
    $error.show();
}else {
    $('#next-button').prop('disabled', false);
    $error.hide();
}

只需确保像这样在您的页面中包含 div...

<div id="error-form"></div>

并将其添加到您的 CSS 中...

#error-form {
    display: none;
}