英文:
is there a way to change the class on a div by clicking on an input button?
问题
我有一个希望在页面加载时隐藏的
当我点击提交按钮时，我希望将该
我的HTML代码如下：
<div class="messages-hide"></div>
<input type="submit" id="btnSubmit" value="发送请求" />
我的CSS代码如下：
.messages-hide {
display: none;
}
.messages-show {
display: block;
}
提交按钮当前可以正常工作，但它没有更改类名（显然）。
我假设使用JavaScript或jQuery可以很简单地解决这个问题，但我不知道从哪里开始。
我找到了几种看起来应该可以工作的解决方案，但没有一种专门适用于 /
我愿意接受任何有效的方法。
非常感谢任何帮助...谢谢！
英文:
I have a div that I want hidden on page load. The class name on the div is "messages-hide"
When I click on a submit button, I want to change the class on that div to "messages-show".
My HTML is:
<div class="messages-hide"></div>
<input type="submit" id="btnSubmit" value="Send the request" />
My CSS is:
.messages-hide {
display: none;
}
.messages-show {
display: block;
}
The submit button works as is, but it's not changing the class (obviously).
I'm assuming this is fairly simple using Javascript or jQuery, but I don't know where to begin.
I've found several solutions that look like they should work, but nothing that works specifically with an input/submit button. I've already spent hours on this. Figure it's time to ask for help...
I'm open to anything that will work.
Any help will be greatly appreciated... thanks!
答案1
得分: 1
以下是翻译好的内容：
有多种方法可以实现这一点。
在我看来，最简单的方法是创建一个名为 messages 的默认类，然后在该类中设置 display: none。
然后创建一个名为 show 的类，其 display 属性设置为 block。
然后在按钮点击事件中，只需将 show 类添加到 messages 的 div 元素上。
不过，需要注意的是，如果这是一个表单中的提交按钮，在表单重新加载页面后，消息将再次被隐藏。除非你的JavaScript提交/点击函数中有其他操作，你尚未发布。
更新
如果你想在页面加载后显示消息 div，那么你可以使用 localStorage.getItem 和 localStorage.setItem。
由于片段工具的限制，我无法启用 localStorage。但对于你的实现，只需取消注释这些行。
<!-- 开始片段: js 隐藏: false 控制台: true babel: false -->
<!-- 语言: lang-js -->
const btnSubmit = document.querySelector("#btnSubmit");
const messages = document.querySelector(".messages");
//const showMsgs = (localStorage.getItem("showMsgs"))
//if(showMsgs)messages.classList.add("show")
btnSubmit.addEventListener("click",(e) => {
messages.classList.add("show")
// localStorage.setItem("showMsgs",1)
});
<!-- 语言: lang-css -->
.messages{
display: none;
}
.messages.show{
display: block;
}
<!-- 语言: lang-html -->
<div class="messages">MESSAGES</div>
<input type="submit" id="btnSubmit" value="Send the request" />
<!-- 结束片段 -->
希望这对你有所帮助。
英文:
There are multiple ways to do this.
The simplest way in my opinion is have a default class lets call it messages. And in that class is display none.
Then have a class called show that is display block.
Then on click of your button simply add the show class to the messages div.
However, one note is if its a submit button in a form, once the form reloads the page the messages will be hidden again. Unless you have more going on in your javascript submit/click function that you haven't posted.
Update
If you want to show the messages div after page load, then you can use localStorage.getItem and localStorage.setItem.
Due to the limitations in the snippet tool, I can't enable localStorage. But for your implementation, just uncomment those lines.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const btnSubmit = document.querySelector("#btnSubmit");
const messages = document.querySelector(".messages");
//const showMsgs = (localStorage.getItem("showMsgs"))
//if(showMsgs)messages.classList.add("show")
btnSubmit.addEventListener("click",(e) => {
messages.classList.add("show")
// localStorage.setItem("showMsgs",1)
});
<!-- language: lang-css -->
.messages{
display: none;
}
.messages.show{
display: block;
}
<!-- language: lang-html -->
<div class="messages">MESSAGES</div>
<input type="submit" id="btnSubmit" value="Send the request" />
<!-- end snippet -->
答案2
得分: 0
你可以使用JavaScript来处理提交按钮的点击事件，并将具有类名"messages-hide"的div的类名更改为"messages-show"。确保添加一些CSS来根据其类来控制div的可见性。
以下是一个完整的示例：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Message</title>
<style>
.messages-hide {
display: none;
}
.messages-show {
display: block;
}
</style>
</head>
<body>
<div class="messages-hide">Your message goes here.</div>
<input type="submit" id="btnSubmit" value="Send the request" />
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js)：
document.getElementById('btnSubmit').addEventListener('click', function() {
var div = document.querySelector('.messages-hide');
if (div) {
div.className = 'messages-show';
}
});
这段代码将在单击提交按钮时将div的类从"messages-hide"更改为"messages-show"，如果它被隐藏，您的消息将变为可见。确保设置了CSS以隐藏"messages-hide"类并显示"messages-show"类，就像上面演示的那样。
您还可以使用类似切换的行为来在连续点击提交按钮时显示和隐藏div。您可以通过检查当前的类然后相应更改它来实现这一点。
以下是更新后的JavaScript代码：
document.getElementById('btnSubmit').addEventListener('click', function() {
var div = document.querySelector('.messages-hide') || document.querySelector('.messages-show');
if (div) {
if (div.className === 'messages-hide') {
div.className = 'messages-show';
} else {
div.className = 'messages-hide';
}
}
});
英文:
You can use JavaScript to handle the click event of the submit button and change the class name of the div with the class "messages-hide" to "messages-show". Make sure to add some CSS to control the visibility of the div based on its class.
Here's a full example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Message</title>
<style>
.messages-hide {
display: none;
}
.messages-show {
display: block;
}
</style>
</head>
<body>
<div class="messages-hide">Your message goes here.</div>
<input type="submit" id="btnSubmit" value="Send the request" />
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
document.getElementById('btnSubmit').addEventListener('click', function() {
var div = document.querySelector('.messages-hide');
if (div) {
div.className = 'messages-show';
}
});
This code will switch the class of the div from "messages-hide" to "messages-show" when the submit button is clicked, and your message will become visible if it's hidden. Make sure the CSS is set up to hide the "messages-hide" class and show the "messages-show" class as demonstrated above.
You can also use a toggle-like behavior to show and hide the div on successive clicks of the submit button. You can achieve this by checking the current class and then changing it accordingly.
Here's the updated JavaScript code:
document.getElementById('btnSubmit').addEventListener('click', function() {
var div = document.querySelector('.messages-hide') || document.querySelector('.messages-show');
if (div) {
if (div.className === 'messages-hide') {
div.className = 'messages-show';
} else {
div.className = 'messages-hide';
}
}
});
答案3
得分: 0
mdn 提到：
> 请注意，提交事件会在 <form> 元素本身上触发，而不会在其中的任何 <button> 或 <input type="submit"> 上触发。然而，发送用于指示表单提交操作已触发的 SubmitEvent 会包含一个 submitter 属性，该属性是触发提交请求的按钮。
因此，您需要监听表单上的提交事件。假设您的表单具有 id 为 "myForm"，您可以在 jQuery 中执行以下操作：
$("#myForm").on('submit', function() {
$(".message-hide").addClass("message-show");
$(".message-hide").removeClass("message-hide");
});
英文:
mdn says:
> Note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it. However, the SubmitEvent which is sent to indicate the form's submit action has been triggered includes a submitter property, which is the button that was invoked to trigger the submit request.
So what you need to do is to watch for the submit event on the form. Assuming your form has an id of "myForm," you can do something like this in jquery:
$("#myForm").on('submit', function() {
$(".message-hide").addClass("message-show");
$(".message-hide").removeClass("message-hide");
});
答案4
得分: 0
我知道我来晚了，但你可以像这样使用jQuery代码，使用.toggle()：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('#btnSubmit').click(function(e){
e.preventDefault();
$('div.message').toggle();
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message" style="display:none;">Message</div>
<input type="submit" id="btnSubmit" value="Send the request" />
<!-- end snippet -->
注意：这是您提供的原始代码的翻译，没有其他附加内容。
英文:
I know I am late but you can use jQuery code like this using .toggle():
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('#btnSubmit').click(function(e){
e.preventDefault();
$('div.message').toggle();
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message" style="display:none;">Message</div>
<input type="submit" id="btnSubmit" value="Send the request" />
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2023年8月11日 05:18:10
- 转载请务必保留本文链接：https://go.coder-hub.com/76879358.html
- css
- javascript
- jquery
- styling
评论