Question

我有一个称为validateForm（）的函数，该函数为我检查表单输入。如果输入不是正确的（每个字段都已填写），则应该显示警报消息，并应在3秒钟后删除警报消息，但确实如此，但是每次我调用此函数时，都会在DOM中创建此元素。如何改善该代码？我想要得到的是带有警报消息的div，如下所示，但不是每次调用该函数时都在DOM中创建，而是一次。

static validateForm() {
    const title = document.querySelector('#title').value;
    const author = document.querySelector('#author').value;
    const isbn = document.querySelector('#isbn').value;

    if (title === '' || author === '' || isbn === '') {
        const div = document.createElement('div');
        div.className = 'alert alert-dismissible alert-danger';
        const message = document.createTextNode('Please fill all fields before adding.');
        div.appendChild(message);

        const bookForm = document.querySelector('#book-form');
        bookForm.parentNode.insertBefore(div, bookForm);


        setTimeout(() => {
            div.classList.add('d-none');
        }, 3000);

        return false;
    }

    return true;
}

Answer 1

您可以在HTML中创建用于警报的div，并将其赋予类别隐藏以便将其隐藏。

然后，当输入不正确时，可以通过警报消息更改该div元素的内部HTML，并添加类 show 使其显示。

放映时间结束后，让我们从该div中删除放映类。

.hidden {
  display: none;
} 

.show {
  display: block;
}

Answer 2

如果您不想切换样式，appendChild的倒置形式为removeChild

//you can reuse the div
const div = document.createElement('div');
{
  div.className = 'alert alert-dismissible alert-danger';
  const message = document.createTextNode('Please fill all fields before adding.');
  div.appendChild(message);
}
function foo() {
  const bookForm = document.querySelector('#root');
  bookForm.parentNode.insertBefore(div, bookForm);

  setTimeout(()=>bookForm.parentNode.removeChild(div), 3000);
}

<div id="root"></div>

<button onclick="foo()">show node</button>

Answer 3

尝试一下：

//construct div globally
var div = document.createElement('div');
div.className = 'alert alert-dismissible alert-danger';
div.style.display = "none";
const bookForm = document.querySelector('#book-form');
bookForm.parentNode.insertBefore(div, bookForm);


static validateForm() {
    const title = document.querySelector('#title').value;
    const author = document.querySelector('#author').value;
    const isbn = document.querySelector('#isbn').value;

    if (title === '' || author === '' || isbn === '') {
        const message = document.createTextNode('Please fill all fields before adding.');
        div.html = message;
        div.style.display = "block";

        setTimeout(() => {
            div.classList.add('d-none');
        }, 3000);

        return false;
    }

    return true;
}

Answer 4

最简单的方法是使用带有 d-none 类的html创建div，然后在要显示div时添加 d-block 类。或使用JQuery slideDown（）函数。然后设置超时并删除 d-block 类并添加 d-none 类或使用JQuery slideUp（）函数

每次调用JavaScript时，JavaScript动态元素重复

4 个答案: