Question

我创建了一个包含多个输入的表单，其中一个是“全名”，当然最后还有一个提交按钮。

函数检查名称输入是否仅是字母字符，如果为true，它将追加div元素，添加css类，快餐栏将淡入淡出，最后消失。以下代码有什么问题？

$(document).ready(function(){
$(".submitForm").click(function(){
    var fullname = $("#firstName").value; 
    var checkIfTrue = /^[A-Za-z ]+$/.test(fullname);
    if (checkIfTrue==true) {
        $('body').append("<div id='textBox'> some text</div>"); 
        $("#textBox").addClass("showPopup");
        setTimeout(function(){
            $("#textBox").remove();}, 3000); 
        return true;
    } 
    else {
        alert("wrong input");
        return false;
    }   
})
})

并且有相关的CSS：

.showPopup {
  visibility : visible;
  animation : fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 20px; opacity: 1;}
}

@keyframes fadeout {
  from {bottom: 20px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

欢呼（无法通过以下方式自己弄清楚： jQuery: append() object, remove() it with delay()）

Answer 1

存在一些小问题，例如使用.value（香草JS）而不是.val()（jQuery）...

当然是主要的问题，单击按钮时防止提交。参见.preventDefault()。

有关其余信息，请参见代码中的注释：

$(document).ready(function(){
  $(".submitForm").click(function(event){
    event.preventDefault();  // Prevent the submit behavior of the button

    var fullname = $("#firstName").val(); // .val() instead of .value
    var checkIfTrue = /^[A-Za-z ]+$/.test(fullname);
    if (checkIfTrue) {  // No need for the ==true
      $('body').append("<div id='textBox'> some text</div>"); 
      $("#textBox").addClass("showPopup");
      setTimeout(function(){
        $("#textBox").remove();
        $(this).closest("form").submit();  // Since it's ok and the animation's over... Submit the form.
      }, 3000); 
      //return true;  // No need to return anything from an event handler
    } 
    else {
      alert("wrong input");
      //return false;  // No need to return anything from an event handler
    }   
  })
})

jQuery：快餐栏：append（）元素，按类添加css，然后延迟移除（）

1 个答案: