有没有办法通过单击输入按钮来更改 div 上的类？

Question

我有一个 div，我想在页面加载时隐藏它。 div 上的类名称是“messages-hide”

当我单击提交按钮时，我想将该 div 上的类更改为“messages-show”。

我的 HTML 是：

<div class="messages-hide"></div>
<input type="submit" id="btnSubmit" value="Send the request" />

我的 CSS 是：

.messages-hide {
    display: none;
}

.messages-show {
    display: block;
}

提交按钮按原样工作，但它不会更改类（显然）。

我假设使用 Javascript 或 jQuery 相当简单，但我不知道从哪里开始。

我发现了几种看起来应该可行的解决方案，但没有一个专门适用于输入/提交按钮。我已经在这上面花了几个小时了。认为是时候寻求帮助了......

我对任何可行的事情都持开放态度。

任何帮助将不胜感激...谢谢！

Answer 1

有多种方法可以做到这一点。

我认为最简单的方法是有一个默认类，我们称之为消息。在该类中不显示任何内容。

然后有一个名为 show 的类，它是显示块。

然后单击按钮，只需将显示类添加到消息 div 中即可。

但是，需要注意的是，如果它是表单中的提交按钮，一旦表单重新加载页面，消息将再次隐藏。除非你的 javascript 提交/点击功能中有更多尚未发布的内容。

const btnSubmit = document.querySelector("#btnSubmit");
const messages = document.querySelector(".messages");

btnSubmit.addEventListener("click",(e) => {
  messages.classList.add("show")
});

.messages{
    display: none;
}

.messages.show{
    display: block;
}

<div class="messages">MESSAGES</div>
<input type="submit" id="btnSubmit" value="Send the request" />