javascript - 首次单击提交按钮时如何始终隐藏 div?
问题描述
我想<div id="hideOnSubmit">
在按下提交按钮后永久隐藏
我正在创建一个多步骤表单,我的意思是当用户跳过第一步时,div 消失
<div class="frm_submit">
[if back_button]<button type="submit" name="frm_prev_page" formnovalidate="formnovalidate" class="frm_prev_page" [back_hook]>[back_label]</button>[/if back_button]
<button class="frm_button_submit" type="submit" id="toggle" [button_action]>[button_label]</button>
<div class="frm_button_submitt" id="hideOnSubmit">
<label><input type="checkbox" name="rememberMe" value="true" tabindex="4"><i class="a-icon a-icon-checkbox"></i><span class="a-label a-checkbox-label">
Keep me signed in.
<span class="a-declarative" data-action="a-popover" data-a-popover="{"activate":"onclick","header":"\"Keep Me Signed In\" Checkbox","inlineContent":"\u003cp>Choosing \"Keep me signed in\" reduces the number of times you're asked to Sign-In on this device.\u003c\/p>\n\u003cp>To keep your account secure, use this option only on your personal devices.\u003c\/p>"}">
<a id="remember_me_learn_more_link" href="javascript:void(0)" class="a-popover-trigger a-declarative">
Details
<i class="a-icon a-icon-popover"></i></a>
</span>
</span></label>
</div>
[if save_draft]<a href="#" tabindex="0" class="frm_save_draft" [draft_hook]>[draft_label]</a>[/if save_draft]
</div>
const elementToHide = document.querySelector("#hideOnSubmit");
document.querySelector("#toggle").addEventListener("click", () => {
elementToHide.style.display = "none";
});
解决方案
这是一个简单的解决方案。只需使用计数器。
const element = document.getElementById("hide");
let clickCount = 0;
element.addEventListener("click", (e) => {
if(clickCount > 0) return element.style.display = "none";
console.log("Clicked")
clickCount++;
});
<div id="hide">Hide me on the second Click</div>
推荐阅读
- powerbi - 减去按季度汇总的值
- sql - 我有一个子查询返回多个值的错误。我如何减少到一个?
- android - 使用共享 ViewModel 跨片段的 RxJava Observable
- ffmpeg - ffmpeg 保持帧率作为源
- ios - 无法在 macOS 上的 .net core 3.1 中将 png 转换为 webp
- python - 无法保存到具有多个表的 Django 中的外键字段中
- css - 样式的宽度和高度不像我预期的那样工作
- python - IndexError:svm 的元组索引超出范围
- django - Django runserver 没有 nginx 配置文件
- nginx - 在 Nginx 上使用带有 CRL 的 mTLS 时出现 502 错误网关(证书吊销)