javascript - 我正在尝试添加关闭功能
问题描述
我在网站页脚创建了一个电子邮件订阅表格。但问题是,当我点击关闭图标时,表单并没有消失。
var button = document.querySelector("#close");
button.addEventListener("click", function() {
var t = document.querySelector(div.getAttribute("data-target"));
t.style.display = "none" == t.style.display ? "block" : "none"
});
<div class="hook-section js-common-hook">
<div class="hook-content small-hook-show">
<div class="loader">
Loading...
</div>
<div class="hook-close-btn sprite-img">Close</div>
<div class="top-sec clearfix">
<div class="left-sec sprite-img">
</div>
<div class="right-sec">
<h5>Email Newsletter</h5>
<p>The best of technology updates from India and around the world</p>
</div>
</div>
<div class="bootom-sec">
<form class="hook-form" action='https://feedburner.google.com/fb/a/mailverify?uri=TechLekhak' method='post' onsubmit='window.open
('https://feedburner.google.com/fb/a/mailverify?uri=12c55',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input placeholder="Enter your email id" name="email" type="text" />
<input value="12c55" name="uri" type="hidden" />
<input value="en_US" name="loc" type="hidden" /><button class="subs-btn">Subscribe Now</button>
</form>
</div>
</div>
</div>
解决方案
您将错误的内容与查询选择器匹配。您正在尝试获取具有“关闭”ID 的元素,但您的代码中没有。
这可以通过添加id="close"
到您想要触发您定义的点击功能的 thr 标记来安排
例子 :
<div id="close" class="hook-close-btn sprite-img">Close</div>
与您要关闭的项目匹配的查询选择器也会发生同样的情况......它不存在,您需要对其进行调整
您可以更改id="toggle"
页面周围以查看这些元素是打开和关闭的元素
这是一个片段
var toggler = document.querySelector("#close");
toggler.addEventListener("click", function() {
var toggleElement = document.querySelector("#toggle");
if (!toggleElement.style.display || toggleElement.style.display === "block") {
toggleElement.style.display = "none";
} else {
toggleElement.style.display = "block";
}
});
<div class="hook-section js-common-hook">
<div class="hook-content small-hook-show">
<button id="close" class="hook-close-btn sprite-img">Close</button>
<div class="top-sec clearfix">
<div class="left-sec sprite-img">
</div>
<div class="right-sec">
<h5>Email Newsletter</h5>
<p>The best of technology updates from India and around the world</p>
</div>
</div>
<div class="bootom-sec">
<form id="toggle" class="hook-form" action='https://feedburner.google.com/fb/a/mailverify?uri=TechLekhak' method='post' onsubmit='window.open
('https://feedburner.google.com/fb/a/mailverify?uri=12c55',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input placeholder="Enter your email id" name="email" type="text" />
<input value="12c55" name="uri" type="hidden" />
<input value="en_US" name="loc" type="hidden" /><button class="subs-btn">Subscribe Now</button>
</form>
</div>
</div>
</div>
推荐阅读
- typescript - 如果结合 saga 测试 (*.spec.ts) 和组件测试 (*tsx),使用 mocha 运行测试会超时
- c# - 在远程数据库上运行 find 方法时,具有 AutoMapper 的实体框架 6 通用存储库会降低性能
- bash - 在 Bash 中,如何编写一个返回字符串来设置 var 的函数,并将日志也输出到 stdout?
- javascript - 参数类型的 WebStorm NoInspection 不可分配
- git - 如何在 SWIFT 中反转到上一个分支?
- java - Hibernate Search 和 Lucene 给出 FileNotFoundException
- asp.net - 如何在 asp.net 5 windows 身份验证中设置重定向 URL
- wordpress - 优化大型 WP 查询
- angular - 如何在 ssr 中调用 http api 请求
- azure - 如何增加 Azure AD B2C 上的守护程序应用程序的令牌生命周期