首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何简化这个JavaScript函数。我有100个按钮控制100个内容区域的显示/隐藏显示

要简化这个JavaScript函数,可以使用事件委托和数据属性来减少代码量和重复代码。以下是一个简化的示例:

HTML部分:

代码语言:txt
复制
<button class="toggle-btn" data-target="content-1">按钮1</button>
<button class="toggle-btn" data-target="content-2">按钮2</button>
<!-- 其他按钮... -->

<div id="content-1" class="content">内容1</div>
<div id="content-2" class="content">内容2</div>
<!-- 其他内容区域... -->

JavaScript部分:

代码语言:txt
复制
document.addEventListener('click', function(event) {
  if (event.target.classList.contains('toggle-btn')) {
    var targetId = event.target.dataset.target;
    var targetContent = document.getElementById(targetId);
    
    if (targetContent) {
      targetContent.classList.toggle('show');
    }
  }
});

CSS部分:

代码语言:txt
复制
.content {
  display: none;
}

.content.show {
  display: block;
}

这个简化的函数利用了事件委托,将点击事件绑定在document上,通过判断点击的元素是否具有toggle-btn类来确定是否是按钮。然后,通过data-target属性获取目标内容区域的ID,并使用getElementById方法获取目标内容区域的元素。最后,使用classList.toggle方法在内容区域的元素上切换show类,从而实现显示/隐藏的效果。

这种简化的方法可以适用于任意数量的按钮和内容区域,避免了为每个按钮编写独立的事件处理函数,提高了代码的可维护性和可扩展性。

推荐的腾讯云相关产品:无特定推荐产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

微信小程序开发实战(16):交互组件

通过标签hidden属性可以控制ActionSheet显示隐藏,该属性值为true,表示隐藏ActionSheet,为false,表示显示ActionSheet。...通过bindchange属性指定一个事件函数,当点击“取消”按钮或ActionSheet外部区域,会调用该函数,通常在该函数隐藏ActionSheet。 下面是完整JavaScript实现代码。...this.data.actionSheetHidden }) }, // 点击“取消”按钮或ActionSheet外部区域,会调用该函数 actionSheetChange: function...,通过cancel-text属性指定取消按钮文本,通过hidden属性控制对话框隐藏显示,通过bindconfirm属性指定点击确定按钮要指定函数,通过bindcancel属性指定点击取消按钮要执行函数...如果指定了no-cancel属性,不会显示取消按钮。 现在分别点击第一个按钮和第二个按钮,会显示如图4和图5所示对话框。 ? 图4 带“确定”和“取消”按钮对话框 ?

88820
  • JQuery 入门学习(一)

    jquery是封装了javascript,是为了简化javascript脚本而存在,所以没必要精通javascriptjavascript中很多函数在jquery中都有更简单替代方式。...我们点击了按钮后就能看到,“离别歌”三个字变成了红色。 隐藏显示和动画效果     Jquery自带了一些动画效果,通过一些参数就能显示出来。...也只是改了一句话:$("div#exm").hide('slow'); 将id=exmdiv元素隐藏,并且是慢慢隐藏,因为'slow'参数。    ...hide方法就是隐藏一个元素所有内容方法。它有一个参数,表示隐藏快慢。     当然hide方法就有show方法,用法一样。还有一个方法toggle,表示在隐藏显示中切换。...这个方法就是改变input标签value属性,也就是改变显示在文本框内内容。 ----     是不是了一种很简单感觉,比javascript要简便了很多。

    1.6K11

    jqueryform表单提交

    jQuery是一个流行JavaScript库,可以简化处理JavaScript操作,包括表单提交。在本篇博客中,我们将介绍如何使用jQuery来实现表单提交操作。...表单提交通常会涉及到用户输入数据验证、显示提交结果等功能。下面以一个简单用户注册表单为例,结合实际应用场景,介绍如何使用jQuery实现表单提交并展示提交结果。...同时,我们添加一个用来显示提交结果区域。...当提交成功时,通过success回调函数显示“注册成功”信息,并重置表单。当提交失败时,通过error回调函数显示“注册失败”提示信息。...htmlCopy code密码输入框(Password Input):用于输入密码,输入内容会以隐藏形式显示

    11510

    【Vue】「Vue.js 入门指南」(三)常用指令含义与用法

    Vue 专栏,博文中所有代码全部收集在博主 GitHub 仓库中; 内容渲染指令 内容渲染指令主要用于控制元素内容动态显示和更新,实现灵活数据展示和交互效果。.../span> 运行结果: 条件渲染指令 条件渲染指令主要用于根据条件来控制元素显示隐藏,实现根据不同条件来动态地显示隐藏元素。...v-show:用于根据条件来控制元素显示隐藏,但不是直接从 DOM 中移除。当条件为真时,元素会显示;当条件为假时,元素会隐藏,但仍占据 DOM 空间。一般用于频繁切换场景。 代码如下: <!...;展示是最后一篇文章时,“下一篇” 按钮应该进行隐藏。...内容渲染指令可以将数据动态地呈现在页面上,条件渲染指令根据特定条件来显示隐藏元素,事件绑定指令能够对用户交互进行响应,属性绑定指令则赋予了更大灵活性和控制力。

    29810

    Android开发人员初识JavaScript

    摘自慕课网 函数 和其他语言一样,JavaScript同样具有函数,在JavaScript如何定义一个函数呢: 1function 函数名() 2{ 3 函数代码; 4} 函数定义遵循以下规则...: 一定要使用关键字function来定义函数函数名”不要使用中文 消息对话框 在JavaScript中,消息对话框三种: 1、alert警告框 ?...,也可为空 8 9返回值: 10当用户点击确定按钮时,文本框中内容将作为函数返回值 11当用户点击取消按钮时,将返回null ?...如果省略这个参数,或者它值是空字符串,那么窗口就不显示任何文档。 2、窗口名称: 可选参数,被打开窗口名称。 (1).该名称由字母、数字和下划线字符组成。 (2)."...4、显示隐藏 在网页中,我们经常可以看到某个元素显示隐藏效果,是通过display属性来实现

    1.6K20

    HTML、CSS、JavaScript学习总结

    • – 隐藏域 • <input name=“名称” type=...@ 样式表首要目的是为网页上元素精确定位。其次,把网页上内容结构和格式控制相分离。即html标签主要是定义网页内容,而CSS决定这些网页内容如何显示。...Ø hidden:隐藏超出范围内容(超出范围内容将被裁切掉)。 Ø scroll:表示一直显示滚动条。 Ø auto:当层内容超出了层容纳范围时,则显示滚动条。...• JavaScript作用 – 校验用户输入内容:用户输入内容校验常分为两种 • 格式性校验:JavaScript • 功能性校验 – 有效地组织网页内容 – 动态地显示网页内容:时钟显示等 –...– //–>之间内容就会被隐藏起来,否则就会被当做html内容显示出来,而对于支持javascript程序浏览器,这对标签不起任何作用。

    3.1K20

    使用 CSS Checkbox Hack 技术制作一个手风琴组件

    在本篇文章里,我们一起学习下如何使用 CSS checkbox hack 技巧制作一个响应式手风琴组件,这个组件完全基于CSS,没有JavaScript脚本,基于窗口大小进行水平和垂直之间进行切换。...CSS Checkbox Hack 允许你通过复选框(Checkbox)是否选中(或单选按钮radio buttons)来控制某些特定样式。...这里运用是:checked 伪类选择器,其意思就是”如果选中了表单(复选框、单选按钮),则应用相关样式规则“ 我们通常隐藏表单控件,然后结合来控制复选框或单选框选择,制作一些特殊效果...基于上面的思路,整理后无需列表内容如下: 2、定义相关样式 准备好上述HTML内容后,我们来定义相关样式,首先我们需要隐藏我们几个单选按钮,我们可以使用left属性,将其移除屏幕显示区域,示例代码如下...最后定义一个可选外观样式,当每个单选按钮获取焦点时,我们为lable标签定义outline属性,这个细节帮组我们增强组件可访问性。

    5.3K30

    《精通reactvue组件设计》之手把手实现一个轻量级可扩展模态框(Modal)组件

    模态框(Modal)组件一般会有如下需求点: 能控制Modal主体样式 提供Modal完全关闭后回调 能控制取消按钮文字和样式 能控制确认按钮文字和样式 控制modal展示位置 控制是否显示右上角关闭按钮...,我们来一步步往里面实现内容吧. 2.2 实现基础配置功能 基础配置功能往往和业务逻辑无关, 仅仅用来控制元素显示隐藏等,由于其非常容易实现,所以我们先来实现以下这些属性功能: bodyStyle...去除mask遮罩 2.3 实现visible(带有弹窗出来和隐藏动画animation) 熟悉antd或者element朋友都知道,visible用来控制modal显示隐藏,我们这里也来实现同样功能...,关于隐藏显示动画,我们这里用transform:scale来实现。...'none' : 'block'}}> 由以上代码我们知道模态框显示隐藏是通过设置display:none/block来控制,但是我们都知道display:none是不能执行动画效果,为了实现内容弹窗动画

    2.7K11

    PyCharm 2024.1 最新变化,最新更新亮点汇总

    审查模式与编辑器集成,促进作者与审查者直接互动。 在检查拉取/合并请求分支时,审查模式会自动激活,并在装订区域显示紫色标记,表明代码更改可供审查。...点击这些标记会弹出一个显示原始代码弹出窗口,这样您就能快速识别哪些代码已被更改。 装订区域图标可以帮助您迅速发起新讨论,以及查看和隐藏现有讨论。...Docker 镜像补全可以简化容器集成,JavaScript 文件路径补全让您可以轻松配置 JavaScript 操作,简化工作流。 您可以在这篇博文中找到更多详细信息。...新增内容可让您快速创建测试数据服务器或存根,简化 Web UI 和微服务开发。...首先,Show all branches(显示所有分支)按钮已被替换为分支筛选器,允许您审查对指定分支内文件所做更改。 我们还调整了工具栏方向,将其水平放置以提高实用性。

    92810

    【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

    如果看别人网页,发现p标签,第一反应,这应该是段落。当我发现 ul li ,那么就知道这是一个列表。 如果你全部用div,就达不到这个效果了。 我们给每一张图片加一个高度和宽度。...3.6.4 左右按钮 至于左右按钮,之前项目中正好有这个素材,就直接拿过来了。 接下来,我们在content区域中,ul下面添加两个按钮,用来控制上一张和下一张。...接下来,做一个当鼠标滑入content区域,就显示按钮,否则按钮隐藏效果。...首先,将两个按钮透明度设为0,也就是隐藏。 opacity: 0; 下一步,设置contenthover事件。...顺便给两个按钮加上 cursor: pointer 这个属性。 3.6.5 如何实现下一张? 终于到js逻辑控制了,马上迎来问题就是,怎么实现下一张呢?

    1.5K70

    【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)说明

    希望本教程提供内容,可以成为JavaWeb初学者一套较为完整练手项目。 昨天给这个系列开了一个头,那么,今天继续吧。...如果看别人网页,发现p标签,第一反应,这应该是段落。当我发现 ul li ,那么就知道这是一个列表。 如果你全部用div,就达不到这个效果了。...3.6.4 左右按钮 至于左右按钮,之前项目中正好有这个素材,就直接拿过来了。 接下来,我们在content区域中,ul下面添加两个按钮,用来控制上一张和下一张。...3.6.5 按钮显隐控制 接下来,做一个当鼠标滑入content区域,就显示按钮,否则按钮隐藏效果。 首先,将两个按钮透明度设为0,也就是隐藏。...解决方法就是给li添加一个浮动: 顺便给两个按钮加上 cursor: pointer 这个属性。 这样一来,鼠标划上去就会显示一个小手图案。 3.6.5 如何实现下一张?

    1.4K20

    PyCharm 2024.1 发布:全面升级,助力高效编程!

    审查模式与编辑器集成,促进作者与审查者直接互动。 在检查拉取/合并请求分支时,审查模式会自动激活,并在装订区域显示紫色标记,表明代码更改可供审查。...点击这些标记会弹出一个显示原始代码弹出窗口,这样您就能快速识别哪些代码已被更改。 装订区域图标可以帮助您迅速发起新讨论,以及查看和隐藏现有讨论。...Docker 镜像补全可以简化容器集成,JavaScript 文件路径补全让您可以轻松配置 JavaScript 操作,简化工作流。 您可以在这篇博文中找到更多详细信息。...新增内容可让您快速创建测试数据服务器或存根,简化 Web UI 和微服务开发。...首先,Show all branches(显示所有分支)按钮已被替换为分支筛选器,允许您审查对指定分支内文件所做更改。 我们还调整了工具栏方向,将其水平放置以提高实用性。

    12410

    useLayoutEffect秘密

    -- 页面其余内容 --> 在这个示例中,large_script.js 是一个较大 JavaScript 文件,它会阻塞页面的加载和渲染。...但是呢,在在 CPU 计算能力下降时,出产生内容闪动情况。也就是,在某个时刻,我们先看到所有的项目和更多按钮,随后,根据可用空间多少,会隐藏掉部分项目。 3....因此,我们在浏览器显示我们页面之前在“第一次通过”阶段渲染内容就是在我们组件中渲染内容:所有按钮一行,包括“更多”按钮。...在浏览器有机会执行所有内容并使 React 变得活跃之后,它最终可以运行 useLayoutEffect,最终按钮才会隐藏。但视觉故障依然存在。...如何解决这个问题涉及用户体验问题,完全取决于我们想“默认”向用户展示什么。我们可以向他们显示一些“加载”状态而不是菜单。或者只显示一两个最重要菜单项。或者甚至完全隐藏项目,并仅在客户端上渲染它们。

    25110

    Jump Start Bootstrap 第4章

    我们将会看到如何添加下拉菜单到导航栏、切换按钮状态、当点击按钮时漂亮警告信息会在显示一段时间后消失等等功能。...Bootstrap为下拉插件提供了一些附加事件,它们是: show.bs.dropdown: 这个事件在句柄被单击时触发;下拉句柄收到请求去显示隐藏菜单; shown.bs.dropdown: 这个事件在菜单被显示时触发...按钮 在前面的章节中,我们看到了如何创建各种类型按钮。这里,我们将看到使用BootstrapJavaScript插件如何在不同状态使用它们,并且让它们切换状态。...该插件在任何DOM元素中侦听滚动,并根据元素滚动位置在导航栏中突出显示菜单项。 基本上,它是一个双组件插件;它由一个导航条和一个内容区域组成。内容区域划分为多个部分,每个部分都有一个惟一ID。...包裹体可以三个类panel-collapse、collapse和in;类collapse用来折叠和隐藏面板中panel-body内容,而in显示这些内容

    28.3K40
    领券