JavaScript 在点击时显示和隐藏元素

2024-04-10

请原谅我的无知,我不知道我在做什么,但我正在努力。

我试图通过搜索来找出它,但它只在 jQuery 中产生了一个功能结果。由于这是一个很小的部分,我认为最好只使用普通的 JavaScript,而不是加载整个 jQuery 库。

有谁知道我如何/是否可以完成下面相同的功能,但只有正常的JavaScript


您可以使用getElementById使用选择一个元素id(相当于$("#something")), and getElementsByClassName根据类名选择元素(相当于$(".something")),并且您可以使用style属性来设置display样式(相当于 jQuery.css方法):

var boxes = document.getElementsByClassName("box1");
document.getElementById("butt1").onclick = function() {
    document.getElementById("links").style.display = "none";
    for(var i = 0; i < boxes.length; i++) {
        boxes[i].style.display = "inline";
    }
}

但请注意getElementsByClassName旧版本的 IE 不支持,这就是为什么 jQuery 即使对于小事情也很有用 - 它缩短了代码并消除了所有恼人的浏览器小差异。

另外,上面的代码和 jQuery 之间的一个主要区别是使用.livejQuery 方法,它监视 DOM 并将事件附加到与选择器匹配的任何元素,无论它已经在 DOM 中还是将来添加。使用上面的代码,如果还没有一个元素id当代码运行时,DOM中的“butt1”,你会得到一个TypeError,因为getElementById将返回null.

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

JavaScript 在点击时显示和隐藏元素 的相关文章

  • 使用selenium IDE提取部分文本并将其放入变量中

    有人可以告诉我应该使用哪个命令来使用 Selenium Ide 从文本中仅提取数字 694575 并将其放入变量中以供进一步使用 这是带有文本的 div div class loginBoxTitle Edit Exhibition Cen
  • Ext JS - 如何滚动到文本区域的底部

    这是我下面的代码 如何滚动到文本区域的底部 它一定是类似的东西 Ext getCmp output setScrollPosition Ext getCmp output getScrollHeight 这是我的文本区域代码 var myW
  • 如何将中间件绑定到socket.io中的事件

    现在您可以将中间件绑定到io use middleware 但这仅在建立套接字连接时触发 有没有办法在将其传递给事件句柄之前拦截它 就像在expressjs中一样 换句话说 In 快递 js你可以做 app get middleware1
  • 如何通过 HTML 按钮播放声音

    我目前通过网站播放音乐的方法是通过 HTML 音频标签 不过我希望能够通过 HTML 按钮来播放它 该按钮应该能够在播放和停止之间切换音乐 我在 JSFiddle 创建了一个示例 但不知道如何实现它 有人可以告诉我如何使用我的 JSFidd
  • Flask wtf.quick_form 运行一些 javascript 并设置表单变量

    我正在创建博客文章 到目前为止已经使用普通的 html 表单完成了 我所做的一个有趣的想法是运行 javascript onclick 并使用页面中的额外数据在表单中设置一个隐藏变量 这很好地传递到服务器并通过 request form 获
  • 何时不使用承诺[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在阅读了数十篇关于 es6 Promise 有多伟大以及为什么我们应该实现它们的文章之后 我有这样的感觉 ALL我的 不平凡的 JavaScri
  • 创建 Cookie 时需要帮助

    我有一个名为yes和另一个名叫no
  • 如何从顺序键盘导航中删除 Vuetify 附加图标

    在带有 Vuetify 的 Vue js 应用程序中 我有一组用v text field并且其中有一个append icon为了切换文本可见性 如下所示
  • Flux + React.js - 操作中的回调是好还是坏?

    让我解释一下我最近遇到的问题 我有 React js Flux 驱动的应用程序 有一个列表显示文章数量 注意 应用程序中有多个不同的列表 和文章详情查看在里面 但每个列表只有一个 API 端点 它返回文章数组 为了显示我需要的详细信息fin
  • 使水平滚动条始终可见,即使底部不在视图中

    我将用一个片段来开始这个问题 该片段几乎显示了我想要完成的任务 wrapper overflow hidden display flex sidebar min width 200px background 333 color FFF co
  • React无限滚动scrollableTarget动态获取id?

    我在我的项目中使用react infinite scroll component 如何让scrollableTarget动态获取item id 我试过这样scrollableTarget item id 但它不起作用 必须与该 div 具有
  • 如何在 e2e AngularJS 测试中进行文件上传?

    在我的一种观点中 我有一个文件上传控件 它支持通过拖放或单击按钮后打开的标准文件对话框上传文件 How to do this in my e2e tests1 1 Just one of the two options will be en
  • 加载另一个 JS 脚本后加载

    这是我的代码 very big js file lots of html stuff 问题是 这些是异步加载的 有没有办法等待第二个脚本直到第一个脚本加载 如果您使用 jQuery 有一个非常简单的方法可以通过获取脚本 https api
  • 替换两个引号之间的字符串

    我想转动一根绳子str hello my name is michael what s your s into hello my name is span class name michael span 我怎样才能在 JavaScript
  • 您如何看待引导模式触发器的相应回调?

    On 引导模态 http getbootstrap com javascript modals 我们知道我们可以为触发器绑定事件 例如show or hide using show shown hide hidden 但此事件绑定仅适用于一
  • 当选择下拉列表中的某些值时,取消选中复选框

    当我从下拉列表中选择某个值或用户未从下拉列表中选择任何值时 我需要取消选中复选框 我现在正在使用 Jquery 这是我现在使用的代码 但它不起作用 Script
  • Express.js Passport认证自动失败跳过策略

    UPDATE 我已将代码从护照本地注册内部移至单独的处理程序 并且运行良好 问题在于 Passport 和本地注册的使用 但我不知道为什么 我使用 Node js Express Passport 进行身份验证和注册设置 这是以前使用过的标
  • Restangular - _.contains() 不是一个函数

    如果您最近通过 Bower 更新了 Restangular 它将安装最新的 Lodash 新的 4 0 然而 这是一个问题 因为 Restangular Angular 现在会抛出错误 contains 不是函数 你怎么解决 解决方案非常简
  • 如何更改订阅值?使用 rxJS

    我正在创建一个计时器 需要你的帮助 我刚刚学习 Angular 和 rxJS 对此我有一些疑问 我正在创建一个具有启动 停止 暂停 重置功能的计时器 并且 btn Reset 必须将我的计时器 暂停 到 300 毫秒 怎么做 D 我的启动定
  • 如何调试 Gulp 任务?

    如何调试我的中定义的 gulp 任务gulpfile js使用诸如 Google Chrome 调试器之类的调试器逐行单步执行任务的代码 对于 Node js 6 3 版本 您可以使用 inspect flag https nodejs o

随机推荐

  • DT Shiny 中单列的渲染下拉列表

    我不精通 Javascript 并且想复制下拉菜单中提供的功能兰森塔布尔 https jrowen github io rhandsontable dropdown autocomplete包但对于DT https rstudio gith
  • 将 IEnumerable 对象序列化为字符串数组的扩展方法?

    我的最后一个问题是关于将对象的字符串表示形式序列化为 XML https stackoverflow com questions 1138414 can i serialize xml straight to a string instea
  • 为什么我的 dockerfile 不复制目录

    在我的 dockerfile 中我有这两行 ADD ansible inventory etc ansible hosts ADD ansible ansiblerepo 第一行有效 因为我可以运行容器并看到我的主机文件已填充了清单文件中的
  • 使用 getElementsByName() 设置选项值

    拥有这个字段集 fieldset legend death legend fieldset
  • 如何从 javascript 中的 API 调用返回值到 React 组件

    我似乎无法将 javascript 中此 API 调用的值返回到我的 React 组件 我有一个调用 API 的 java 脚本文件 在js文件中 返回结果 但是当我在react组件中调用useEffect中的js函数时 它返回未定义 ex
  • ctags 多行 C 函数原型

    ctags 有没有办法处理 C 中的多行函数原型 我四处寻找 fields S应该做多行原型 但我无法让它工作 ctags x c kinds pf fields S file file int foo int x int y ctags
  • django QueryDict 仅返回列表的最后一个值

    使用 django 1 8 我观察到一些奇怪的事情 这是我的 JavaScript function form submit var form form1 id request post this attr action form seri
  • 面向对象的 CSS:这重要吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我刚刚发现这个有趣的演示 http www slideshare net stubbornella object oriented css ty
  • 为什么React需要jsdom来测试?

    在为 React 组件编写测试时 您必须将它们渲染到 DOM 中 以便断言它们的正确性 例如 如果您想测试某个类是否已添加到给定状态的节点 则必须渲染到 DOM 节点 然后通过普通 DOM API 检查该 DOM 节点 问题是 考虑到 Re
  • 使用 C#、LINQ - 想要获取列名和数据值

    我想以一种相当通用的方式显示一行的内容 我将针对几个不同的表使用这种技术 输出将是纯文本 在 RichTextBox 中 如下所示 表名 PROPNUM xxxxxx 销售日期 月 日 年 最后一列 最后一个值 a 我知道每个表的列名 但真
  • 在Vue组件模板中的元素属性中组合字符串和变量

    我有一个表格 其中有 1 个客户或 2 个客户 我创建了一个用于选择计数的组件 另一个用于显示客户端信息表单的组件 因此 如果有 2 个客户端 使用 v for 则有 2 个表单 div div
  • 如何使用 SolrJ 获取突出显示的片段?

    我正在将我的应用程序从 Lucene 迁移到 Solr Solr 可以更好地处理突出显示 但是如果我搜索关键字 city 我会期望得到如下响应 id fdc3833a 0e4f 4314 ba8c title Paris is a beau
  • 异常模块的阴谋导入错误

    我到处搜索都找不到解决这个问题的方法 我正在尝试导入plotly在 Jupyter Notebook 中使用以下代码并分别收到以下错误 Code import sys print sys path sys path append usr l
  • C# 4.0 中的“动态”类型有何用途?

    C 4 0 引入了一种称为 动态 的新类型 听起来不错 但是程序员会用它做什么呢 有没有什么情况可以挽救局面 The dynamic添加了关键字以及 C 4 0 的许多其他新功能 以便更轻松地与具有不同 API 的其他运行时中或来自其他运行
  • Javascript 日期加 2 周(14 天)

    我用它来获取日期 var currentTime new Date var month currentTime getMonth 1 var day currentTime getDate var year currentTime getF
  • 即使文件存在于我的 Linux 上,php file_exists 也会返回 false

    这个问题已经被问过很多次了 但我找到的答案都没有帮助我 我正在尝试让 php file exists 工作 它起作用的唯一情况是 php 文件与要使用 file exist 的文件位于同一目录中并且仅使用文件名 即不包括路径 但这不是随之而
  • 开玩笑嘲笑测试之间出血,重置并不能解决问题

    测试两个模块 helper它利用render 这是可能的render扔 所以我处理它helper 我想要进行测试以确保其按预期工作 当我最初编写测试时 我在测试本身中编写了该测试所需的内容 包括模拟 使用jest doMock 一旦所有测试
  • Android 或 Java 类命名带有 $ 符号

    我正在审查某个项目 发现有许多类具有相同的名称 但末尾带有美元 符号 数字不断增加 例如 Class java Class 1 java Class 2 java Class n java OtherClass java OtherClas
  • 简单的 TabView 在 iOS 16 中崩溃

    有一个奇怪的崩溃 只发生在 iOS 16 中 当我尝试创建一个TabView使用页面样式 当数组为空时它会崩溃 但它在 iOS 15 中运行得很好 这是 iOS 16 的错误吗 Xcode版本 版本 14 0 14A309 iOS版本 16
  • JavaScript 在点击时显示和隐藏元素

    请原谅我的无知 我不知道我在做什么 但我正在努力 我试图通过搜索来找出它 但它只在 jQuery 中产生了一个功能结果 由于这是一个很小的部分 我认为最好只使用普通的 JavaScript 而不是加载整个 jQuery 库 有谁知道我如何