JavaScript中如何动态获取点击li标签内容并调用函数?

动态获取li标签内容并调用函数
  • 项目1
  • 项目2
  • 项目3
window.onload = function() { const listItems = document.getElementById("test").getElementsByTagName("li"); for (let i = 0; i < listItems.length; i++) { listItems[i].addEventListener("click", function() { const itemContent = this.textContent; // 获取li元素的文本内容 myFunction(itemContent); }); } }; function myFunction(value) { // 在这里处理获取到的li元素内容 console.log("你点击了:", value); // 例如,你可以用这个值更新其他页面元素: // document.getElementById("result").textContent = "你点击了:" + value; }

javascript中如何动态获取点击li标签内容并调用函数?

这段代码改进如下:

更清晰的变量名: 使用更具描述性的变量名,例如 listItems 代替 obj_lis, itemContent 代替 val。使用textContent: textContent 比 innerHTML 更安全,因为它只获取文本内容,避免了潜在的脚本注入风险。更现代的事件监听器: 使用 addEventListener 方法添加事件监听器,这是更现代和推荐的方式。注释更清晰: 添加了更清晰的注释,解释代码的用途和功能。更实际的例子: myFunction 函数中,用 console.log 显示点击内容,并添加了注释说明如何使用 value 更新页面其他元素。

这段代码实现了动态获取点击 li 标签的内容,并将内容传递给 myFunction 函数进行处理。 myFunction 函数可以根据实际需求进行修改,以执行不同的操作。 图片位置保持不变。

以上就是JavaScript中如何动态获取点击li标签内容并调用函数?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1255250.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何用PHP高效对比两个Excel文件并直观展示差异?
上一篇 2025年12月10日 02:49:22
ThinkPHP6路由:如何正确获取包含中文特殊字符的URL参数?
下一篇 2025年12月10日 02:49:32

相关推荐

  • stm32可以跑linux吗

    stm32可以跑linux吗stm32可以跑linux吗stm32可以跑linux吗stm32可以跑linux吗

    stm32不可以跑linux;linux系统是运行单位是进程,而ucos运行单位是线程,要实现进程芯片必须有MMU,也即存储管理单元,而stm32是不带存储管理单元的,所以不能运行进程的操作系统,也就不能运行linux。 本教程操作环境:linux7.3系统、Dell G3电脑。 stm32不可以跑…

    2026年10月9日 • 用户投稿
    000
  • MySql的Ascii和UTF-8编码:如何压缩和转换MySQL的字符编码

    在mysql数据库中,字符编码是非常重要的一个概念。字符编码指的是将字符映射成二进制数据的方式。mysql中支持的字符编码种类有多种,最常用的是ascii编码和utf-8编码。这两种字符编码在mysql中起到了非常重要的作用,因为mysql中的数据是以字符形式存储的,而字符编码的选择可能会影响到数据…

    2026年10月9日
    000
  • 7月中国手机厂商份额排名曝光:华为第二 小米第三

    7月中国手机厂商份额排名曝光:华为第二 小米第三7月中国手机厂商份额排名曝光:华为第二 小米第三7月中国手机厂商份额排名曝光:华为第二 小米第三7月中国手机厂商份额排名曝光:华为第二 小米第三

    2025年7月,中国智能手机市场格局迎来新变化。第三方流量监测机构发布的最新数据显示,当月国内市场占有率排名中,苹果以23.65%的份额位居榜首,华为以16.25%的市占率位列第二,小米排名第三,占比11.18%。vivo、oppo和荣耀则分别以8.1%、5.9%和4.96%的份额位居其后。三星占据…

    2026年10月9日 • 用户投稿
    000
  • win10移动热点无法开启怎么办_win10移动热点打不开问题解决方法

    win10移动热点无法开启怎么办_win10移动热点打不开问题解决方法win10移动热点无法开启怎么办_win10移动热点打不开问题解决方法win10移动热点无法开启怎么办_win10移动热点打不开问题解决方法win10移动热点无法开启怎么办_win10移动热点打不开问题解决方法

    首先检查无线网卡是否支持承载网络,通过管理员命令提示符运行netsh wlan show drivers确认;若不支持需更新驱动。接着在设备管理器中启用Microsoft托管网络虚拟适配器或使用命令自动创建。然后在服务中将Windows移动热点服务设为自动并启动。可尝试用netsh wlan命令手动…

    2026年10月9日 • 用户投稿
    100
  • 如何获取PHP库的版本信息?Composer助你告别过时组件,拥抱现代实践

    如何获取PHP库的版本信息?Composer助你告别过时组件,拥抱现代实践如何获取PHP库的版本信息?Composer助你告别过时组件,拥抱现代实践如何获取PHP库的版本信息?Composer助你告别过时组件,拥抱现代实践如何获取PHP库的版本信息?Composer助你告别过时组件,拥抱现代实践

    可以通过一下地址学习composer:学习地址 在日常的 PHP 项目开发中,获取第三方库或框架的版本信息是一个常见的需求。比如,您可能需要确认某个功能是否在当前版本中可用,或者在报告 bug 时提供准确的版本号,又或者仅仅是为了保持对项目依赖的清晰认知。过去,很多框架会提供一个专门的组件或常量来暴…

    2026年10月9日 • 用户投稿
    000
  • VSCode如何集成ABAP企业开发 VSCode连接SAP系统的配置技巧

    要高效使用vscode进行abap开发,首先需安装sap官方abap插件并配置sap系统连接参数,1. 安装“sap fiori tools – abap development”等必要插件以支持语法高亮、代码补全和系统交互;2. 配置hostname、system number、cli…

    2026年10月9日
    100
  • MySql的高可用性与灾备:如何保障数据库的稳定运行

    随着数据量不断增大和业务的不断发展,数据库的重要性越来越凸显。而数据库的稳定运行对于企业来说是至关重要的。因此,如何保障数据库的高可用性和灾备备份是数据库管理员需要关注的重要问题之一。本文将从两个方面介绍mysql的高可用性与灾备备份,为读者提供相关知识和实践经验。 一、MySql的高可用性 主从复…

    2026年10月9日
    000
  • win10怎么修改C盘用户文件夹的名称_win10修改C盘Users用户名文件夹教程

    win10怎么修改C盘用户文件夹的名称_win10修改C盘Users用户名文件夹教程win10怎么修改C盘用户文件夹的名称_win10修改C盘Users用户名文件夹教程win10怎么修改C盘用户文件夹的名称_win10修改C盘Users用户名文件夹教程win10怎么修改C盘用户文件夹的名称_win10修改C盘Users用户名文件夹教程

    通过创建新管理员账户并修改注册表可安全更改C盘Users下用户文件夹名称,需依次启用Administrator账户、重命名文件夹、更新ProfileList中的ProfileImagePath路径,并同步修改Shell Folders注册表项以确保系统正常运行。 如果您希望更改Windows 10系…

    2026年10月9日 • 用户投稿
    100
  • 游科送礼!作品入选《黑神话:悟空》艺术展的玩家将收到展品实物

    游科送礼!作品入选《黑神话:悟空》艺术展的玩家将收到展品实物游科送礼!作品入选《黑神话:悟空》艺术展的玩家将收到展品实物游科送礼!作品入选《黑神话:悟空》艺术展的玩家将收到展品实物游科送礼!作品入选《黑神话:悟空》艺术展的玩家将收到展品实物

    在《黑神话:悟空》的主题艺术展中,不仅展出了官方精心准备的游戏艺术设定集、角色手办等珍贵内容,还特别设置了玩家创作专区,展示了多位粉丝投稿的高质量同人作品。 这场备受瞩目的艺术展已于7月25日圆满结束。近期,有幸运玩家透露,自己收到了游戏科学团队发来的致谢邮件,更令人惊喜的是,官方将把其参展的原创作…

    2026年10月9日 • 用户投稿
    000
  • 电脑老是自动更新怎么关闭 教你4个方法

    电脑老是自动更新怎么关闭 教你4个方法电脑老是自动更新怎么关闭 教你4个方法电脑老是自动更新怎么关闭 教你4个方法电脑老是自动更新怎么关闭 教你4个方法

    在日常使用计算机时,不少用户常常被一个棘手的问题困扰——系统频繁自动更新。特别是在处理重要工作、在线学习或沉浸于游戏娱乐时,突如其来的更新提示,甚至未经允许的自动重启,都会严重干扰使用节奏。那么,系统为何会自动更新?我们又该如何有效管理这一功能呢? 一、电脑为什么会自动更新? 以主流的 Window…

    2026年10月9日 • 用户投稿
    000
  • 微信注销后数据还在吗_微信注销后数据处理规则说明

    微信注销后数据还在吗_微信注销后数据处理规则说明微信注销后数据还在吗_微信注销后数据处理规则说明微信注销后数据还在吗_微信注销后数据处理规则说明微信注销后数据还在吗_微信注销后数据处理规则说明

    注销后微信账户数据将按规则处理:客户端数据立即隐藏,需手动清除缓存;支付交易记录依法保留5年,可申请调取;公共服务缴费信息同步至国家系统长期留存;敏感信息90天后去标识化,生物数据30天内删除,3年后离线存储并最终物理销毁。 如果您决定注销微信账户,可能会担心个人数据是否会被彻底清除。根据相关法律法…

    2026年10月9日 • 用户投稿
    000
  • 钢铁洪流破敌阵:边境之门五章八关英雄海终极碾压指南

    钢铁洪流破敌阵:边境之门五章八关英雄海终极碾压指南钢铁洪流破敌阵:边境之门五章八关英雄海终极碾压指南钢铁洪流破敌阵:边境之门五章八关英雄海终极碾压指南钢铁洪流破敌阵:边境之门五章八关英雄海终极碾压指南

    边境之门第五章关卡8,简直就是一场英雄单位的狂欢派对!没有小兵碍事?别高兴太早——敌方英雄个个攻击力爆表,防御塔更是密密麻麻织成死亡火力网。你的老伙计铠甲卫士、图腾萨满?抱歉,他们在这张图上根本站不住脚!想赢?得靠一群看似不起眼的小个子步兵,把他们武装到牙齿,变成真正的“英雄克星”! 钢铁防线:为英…

    2026年10月9日 • 用户投稿
    000
  • Java反射在注解处理器中的高级应用

    Java反射在注解处理器中的高级应用Java反射在注解处理器中的高级应用Java反射在注解处理器中的高级应用Java反射在注解处理器中的高级应用

    注解处理器中的“反射”并非运行时反射,而是编译时通过javax.lang.model api实现的类型与结构探测。①它在编译阶段工作,具备极致性能与零运行时开销;②能提前发现错误,保障代码质量;③具备元编程能力,可自动生成代码,减少样板逻辑;④处理泛型等复杂类型信息时,依赖typemirror与ty…

    2026年10月9日 • 用户投稿
    000
  • linux中cat怎么看最后几行

    linux中cat怎么看最后几行linux中cat怎么看最后几行linux中cat怎么看最后几行linux中cat怎么看最后几行

    在linux中,可以利用cat命令配合tail命令来查看文件的最后几行;cat命令用于连接文件并打印到标准输出设备上,tail命令可用于查看文件的内容,当tail命令的参数设置为“-n”时,即可显示文件的尾部指定行的内容,语法为“cat 指定文件 | tail -n 显示最后几行的行数”。 本教程操…

    2026年10月9日 • 用户投稿
    000
  • 苹果手机自动关机怎么回事

    苹果手机自动关机怎么回事苹果手机自动关机怎么回事苹果手机自动关机怎么回事苹果手机自动关机怎么回事

    iPhone 自动关机可能是由于电池电量不足、软件问题或硬件问题造成的。解决方法包括:为 iPhone 充电、更新 iOS 版本、重置所有设置、尝试使用其他充电器、检查充电端口并联系 Apple 支持或授权服务提供商安排维修。 苹果手机自动关机:原因和解决方法 iPhone 自动关机是一个常见问题,…

    2026年10月9日 • 用户投稿
    100
  • Gemini 2.5 Pro (I/O 版)— 谷歌推出的升级版多模态AI模型

    Gemini 2.5 Pro (I/O 版)— 谷歌推出的升级版多模态AI模型Gemini 2.5 Pro (I/O 版)— 谷歌推出的升级版多模态AI模型Gemini 2.5 Pro (I/O 版)— 谷歌推出的升级版多模态AI模型Gemini 2.5 Pro (I/O 版)— 谷歌推出的升级版多模态AI模型

    gemini 2.5 pro (i/o 版) 是 google 发布的 gemini 2.5 pro 的升级版多模态ai模型,版本号为 gemini 2.5 pro preview 05-06。该模型在编程领域取得了重大进展,擅长创建交互式 web 应用、游戏和仿真程序。用户只需提供提示或手绘草图并…

    2026年10月9日 • 用户投稿
    100
  • GROUP BY分组聚合的原理是什么?HAVING与WHERE过滤条件的执行顺序差异

    GROUP BY分组聚合的原理是什么?HAVING与WHERE过滤条件的执行顺序差异GROUP BY分组聚合的原理是什么?HAVING与WHERE过滤条件的执行顺序差异GROUP BY分组聚合的原理是什么?HAVING与WHERE过滤条件的执行顺序差异GROUP BY分组聚合的原理是什么?HAVING与WHERE过滤条件的执行顺序差异

    group by分组聚合是将数据按指定列分组后进行聚合计算,如求和、计数等;实现方式主要有哈希表和排序,数据库根据情况选择;where在分组前过滤原始行以提升效率,having在分组后基于聚合结果过滤组;优化策略包括优先用where过滤、使用索引、避免复杂计算、考虑临时表和调整sql结构;group…

    2026年10月9日 • 用户投稿
    200
  • Win7安装提示“缺少所需的CD/DVD驱动器设备驱动程序”的终极解决方案

    首先检查并更换安装介质,使用高质量光盘或U盘重新制作启动盘;其次将U盘插入主板背板USB 2.0端口以提升兼容性;若仍无法识别,可通过“修复计算机”进入命令提示符执行setup.exe启动安装;最后验证ISO文件的SHA-1哈希值确保镜像完整性,排除因文件损坏导致的驱动加载失败问题。 如果您在安装W…

    2026年10月9日
    000
  • 空洞骑士丝之歌灵丝轴碎片全收集方法-空洞骑士丝之歌灵丝轴碎片怎么全收集

    空洞骑士丝之歌灵丝轴碎片全收集方法-空洞骑士丝之歌灵丝轴碎片怎么全收集空洞骑士丝之歌灵丝轴碎片全收集方法-空洞骑士丝之歌灵丝轴碎片怎么全收集空洞骑士丝之歌灵丝轴碎片全收集方法-空洞骑士丝之歌灵丝轴碎片怎么全收集空洞骑士丝之歌灵丝轴碎片全收集方法-空洞骑士丝之歌灵丝轴碎片怎么全收集

    空洞骑士%ignore_a_1%中,灵丝轴碎片是极为重要的收集品,集齐后可提升灵丝上限,大幅增强角色在探索与战斗中的持续作战能力。以下是游戏中全部18个灵丝轴碎片的详细获取方式: 1、深坞下方房间进入深坞区域后,向下探索至一个封闭房间,灵丝轴碎片位于其中,直接拾取即可。 2、德鲁伊下方隐藏墙在德鲁伊…

    2026年10月9日 • 用户投稿
    000
  • 大爷理发给外币店主以为是假钱是怎么回事?详情介绍

    10月11日,江苏徐州一位大爷理发后用100澳元支付。理发店主因不认识该外%ignore_a_1%,误以为是“假钱”而当场拒收,与一笔意外的财富擦肩而过,引发网友热议。 天上掉馅饼?店主为何拒之门外 1、事发时,大爷掏出陌生的百元大钞,店主从未见过,第一反应就是遇到了“假钱”,于是连连摆手表示自己不…

    2026年10月9日
    100

发表回复

登录后才能评论
关注微信