关闭小广告【JavaScript】

在 JavaScript 中实现关闭小广告的功能,可以通过监听点击事件来隐藏广告元素。

实现效果:

代码:

html 复制代码
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>关闭小广告示例</title>
		<style>
			.ad {
				width: 300px;
				height: 100px;
				background-color: lightblue;
				position: relative;
				margin: 20px;
				padding: 10px;
				border: 1px solid #000;
			}

			.close-btn {
				position: absolute;
				top: 5px;
				right: 5px;
				cursor: pointer;
				background-color: red;
				color: white;
				border: none;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<div class="ad">
			<button class="close-btn">关闭</button>
			<p>这是一个小广告!</p>
		</div>

		<script>
			const closeButtons = document.querySelectorAll('.close-btn');

			//方式一
			closeButtons.forEach(button => {
				button.addEventListener('click', function() {
					const ad = this.parentElement;
					ad.style.display = 'none'; // 隐藏广告
				});
			});


			// //方式二
			// for (let i = 0; i < closeButtons.length; i++) {
			// 	closeButtons[i].addEventListener('click', function() {
			// 		const ad = this.parentElement;
			// 		ad.style.display = 'none'; // 隐藏广告
			// 	});
			// }
		</script>
	</body>
</html>

部分代码解析:

方式一:

javascript 复制代码
const closeButtons = document.querySelectorAll('.close-btn');

			closeButtons.forEach(button => {
				button.addEventListener('click', function() {
					const ad = this.parentElement;
					ad.style.display = 'none'; // 隐藏广告
				});
			});
代码解析:

1. 选择元素:

javascript 复制代码
const closeButtons = document.querySelectorAll('.close-btn');
  • 使用**document.querySelectorAll** 方法选择所有带有 close-btn 类的元素,并将它们存储在 **closeButtons**变量中。返回的结果是一个 NodeList(类似数组的对象)。

2. 遍历按钮:

javascript 复制代码
closeButtons.forEach(button => {
  • 使用 **forEach**方法遍历每个关闭按钮。

3. 添加事件监听器:

javascript 复制代码
button.addEventListener('click', function() {
  • 为每个按钮添加一个点击事件监听器,当按钮被点击时,将会执行后面的函数。

4. 隐藏广告:

javascript 复制代码
const ad = this.parentElement;
ad.style.display = 'none'; // 隐藏广告
  • 在点击事件处理函数中,this 代表被点击的按钮。this.parentElement 获取按钮的父元素(假设这是广告的容器),然后将其**display** 样式设置为 'none',这会隐藏这个广告元素。

方式二:

javascript 复制代码
const closeButtons = document.querySelectorAll('.close-btn');

for (let i = 0; i < closeButtons.length; i++) {
    closeButtons[i].addEventListener('click', function() {
        const ad = this.parentElement;
        ad.style.display = 'none'; // 隐藏广告
    });
}
代码解析:
  • 使用 for 循环,从 0 开始,直到 closeButtons.length,逐个访问每个关闭按钮。
  • 使用 **closeButtons[i]**来获取当前按钮,并添加点击事件监听器。
  • this.parentElement 是用于获取当前 DOM 元素的父元素。在事件处理函数中,this 代表触发事件的元素(在你的例子中是关闭按钮),而 **parentElement**属性则返回该元素的父节点。
相关推荐
前端风云志2 分钟前
typescript结构化类型应用两例
javascript
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im2 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
西陵2 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常2 小时前
vue中添加原生右键菜单
javascript·vue.js
旷世奇才李先生3 小时前
Next.js 安装使用教程
开发语言·javascript·ecmascript
Mintopia4 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学