如何优化这段javascript代码?

2023-12-09

如何优化这个功能呢?我可以为所有操作创建一个函数吗?

$('#b-hat1').click(function() {
  $('#hat3').hide();
  $('#hat2').hide();
  $('#hat1').show();
});
$('#b-hat2').click(function() {
  $('#hat3').hide();
  $('#hat2').show();
  $('#hat1').hide();
});
$('#b-hat3').click(function() {
  $('#hat3').show();
  $('#hat2').hide();
  $('#hat1').hide();
});

没有你的html,我只能给你一个关于如何解决它的“粗略”想法。

$("div[id^='hat']").hide();隐藏所有以以下开头的 divhat

$('div[id^="b-hat"]').click(function() {
  var id = $(this).attr("id").replace("b-","");
  $("div[id^='hat']").hide();
  $('#' + id).show(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hat1">hat1</div>
<div id="hat2">hat2</div>
<div id="hat3">hat3</div>
<br><br>

<div id="b-hat1">Show hat1</div>
<div id="b-hat2">Show hat2</div>
<div id="b-hat3">Show hat3</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何优化这段javascript代码? 的相关文章

  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 除了更改标题之外,如何在 Firefox 中强制另存为对话框?

    有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框 我无法更改标题 如果您可以将文件以 Base64 格式输出到客户端 则可以使用 data uri 进行下载 location href
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • jQuery Mobile 表单验证

    我有一个移动网站 除了验证之外一切都工作正常 基本上我希望从用户那里获取值 然后在单独的页面 process php 上处理它们 但是 在这样做之前 我需要检查以确保字段已填充 我已经研究了几种方法来做到这一点 但似乎没有一种有效 我现在有
  • jquery从变量中删除html元素

    我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除 它的 ID 为 myButton 如何从变量中保存的 html 中删除它 我建议这种方法 var itin
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称?

    On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中 电话 Test of data named attribute br
  • Jquery 验证不能正确验证数字?

    我在使用 jquery 非侵入式验证验证数字时遇到问题 我使用的版本是 ASP NET MVC 3 jQuery 1 9 1 jQuery 用户界面 1 10 1 JQuery 验证 1 11 0 我试图验证的输入是
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • jQuery 对象相等

    如何确定两个 jQuery 对象是否相等 我希望能够在数组中搜索特定的 jQuery 对象 inArray jqobj my array 1 alert deviceTypeRoot deviceTypeRoot False alert d
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐

  • Angular2 Beta 依赖注入

    我有一个加载 QApi 服务的 NavBar 组件 QApi 服务加载 UserService 但出现以下错误 EXCEPTION No provider for UserService NavBarComponent gt QApi gt
  • 如何让Android Service与Activity通信

    我正在编写我的第一个 Android 应用程序 并试图了解服务和活动之间的通信 我有一个服务将在后台运行并执行一些 GPS 和基于时间的日志记录 我将有一个用于启动和停止服务的活动 因此 首先 我需要能够确定活动启动时服务是否正在运行 这里
  • iPhone 所有视图控制器都有一个标题

    我有一个带有选项卡栏控制器 带有 4 个视图控制器 的应用程序 它包含一个导航控制器 所有这些都是以编程方式创建的 我的问题 有没有一种方法可以为所有视图控制器设置一个导航栏标题 例如 当我切换选项卡时 标题是相同的 对我来说理想的解决方案
  • 在 SELECT 列表中的其他位置引用别名

    我有以下查询 select FirstName LastName Case When LastName Jones then N A End as Other Case When Other is not null then 1 else
  • 为什么这些 apt 软件包在 Ubuntu 和 Heroku 上的行为不一样?

    我想用ZBar从Python开始Heroku 在常规 Ubuntu 14 04 服务器上我可以运行 sudo apt get install python qrtools OR sudo apt get install zbar tools
  • 如何使用 ASP.NET 解析 JSON 字符串?

    我正在使用 Sendgrid API 发送和检索已发送邮件的统计信息 我想将 API 的响应存储在数据库中 protected void btnBounces Click object sender EventArgs e try stri
  • android java.lang.IllegalStateException:无法从 CursorWindow 读取第 0 行、第 0 列

    我正在开发一个应用程序 它下载一些文件并将其文本保存在 file content 字段中到数据库中 文件大小可以从几 KB 到 10 MB 不等 该应用程序在保存时适用于所有尺寸 在长 file content 记录上使用 select 语
  • Plotly:带有下拉菜单的散点图,用于更改数据和计算注释

    我正在尝试制作一个带有 2 个下拉菜单的散点图 用于选择要绘制 x 轴和 y 轴的数据列 来自 pandas 数据框 我还希望该图具有随下拉选择而变化的相关统计注释 因为注释是根据 x 和 y 数据作为参数计算的 我已经成功地使用下面的代码
  • 使用操作按钮刷新主面板屏幕

    我正在构建一个闪亮的应用程序 我想刷新主面板屏幕 这是示例代码 我有一个提交按钮来显示数据 我有一个刷新按钮来清除屏幕 我不太确定如何在 R 和闪亮中编写重新刷新按钮的代码 因为我对此很陌生 感谢您的关注 library DT ui lt
  • React hooks useEffect 第二次调用 API 和第一次调用 API 响应也返回

    我正在使用 useEffect 获取 API 并且 API 响应正确 例如 response message This is a image link status success error null 第二次 当我收到下一个 API 调用
  • 在 Android 中的 ViewPager 中将子 Fragment 添加到父 Fragment

    I m developing an app that has some tabs something like this 每个选项卡都是一个 Fragment 每个 Fragment 显示文章 类别和一些其他信息的列表视图 我想做的是 当我
  • 千字节/兆字节/太字节的表示

    我对不同字节单位的表示有点困惑 自始至终都认为 1 字节 8 位 然而 在很多来源中我看到 1 KB 2 10 字节 1024 字节 AND 1 KB 1000 字节 这不就是顶撞在这两种情况下都规定 1 字节是 8 位 不同的来源对这些不
  • GDI+ 通用错误

    当我的图像从网络服务器上的数据库加载时 我看到以下错误 GDI 中发生一般错误 在 System Drawing Image Save Stream流 ImageCodecInfo编码器 编码器参数 encoderParams at Sys
  • SoapClient 未发送证书

    我一直在阅读我能找到的所有问题 答案 但没有一个能解决我的问题 这是使用 cURL 和证书连接到同一 URL pem pem 文件的绝对路径 这有效 ch curl init wsdl curl setopt ch CURLOPT SSL
  • 编写XSL对xml数据执行一些操作

    如何在 products xsl 正文中编写 xsl 以获取数量 gt 10 的产品名称和状况 产品 xml
  • Rails 5.2 ActiveStorage 未定义方法 `signed_id' for nil:NilClass

    我实现了从我的中删除图像的代码User model Rails 5 2 Active Storage 清除 删除附件 我认为它删除了图像 但现在我收到错误 undefined method signed id for nil NilClas
  • 调用 EnvelopesApi#update_document_tabs 返回错误

    我想一次更新文档的所有选项卡 该文档的信封是根据已定义收件人和选项卡的模板创建的 我正在调用this具有以下有效负载的端点来更新选项卡 textTabs validationPattern validationMessage shared
  • 适用于 Windows Phone 7 的 Windows Live ID 身份验证

    我正在开发一个 Windows Phone 7 应用程序 但不想重新实现我自己的身份 身份验证服务 特别是当我们知道用户将使用 Windows Live 帐户登录时 但是我明白从这个线程Microsoft 不会授予对登录用户详细信息的访问权
  • 使用 Python 读取 MS-Word 文件中页眉和页脚中的表格内容

    这是我对这个问题的扩展问题 如何使用Python读取MS Word文件中表格的内容 YusuMishi 提供的解决方案很棒 但它没有捕获页眉和页脚中的页眉 Let me elaborate on that 使用代码 import win32
  • 如何优化这段javascript代码?

    如何优化这个功能呢 我可以为所有操作创建一个函数吗 b hat1 click function hat3 hide hat2 hide hat1 show b hat2 click function hat3 hide hat2 show