原创投稿
  1. 创想鸟首页
  2. 用户投稿

如何用JavaScript获取点击的列表项内容并传递给函数？

程序猿 • • 用户投稿 
点击列表项获取内容并调用函数
      
  • 张三
    •   
  • 李四
    •   
  • 王五
window.onload = function() {  const listItems = document.getElementById("test").getElementsByTagName("li");  for (let i = 0; i < listItems.length; i++) {    listItems[i].addEventListener("click", function() {      const name = this.textContent;      myFunction(name);    });  }};function myFunction(name) {  // 在这里处理获取到的姓名  console.log("你点击了：" + name);  //  你可以在这里添加其他的操作，例如：  //  alert("你点击了：" + name);  //  发送Ajax请求等等}

如何用javascript获取点击的列表项内容并传递给函数？

改进说明：

使用了更简洁的const声明变量，提高了代码可读性。使用了addEventListener方法添加事件监听器，这是现代JavaScript的推荐方法。使用textContent代替innerHTML获取文本内容，避免潜在的HTML标签干扰。提供了一个更清晰的myFunction函数示例，展示了如何处理获取到的姓名。 该示例仅打印到控制台，但你可以轻松地替换成任何你需要的操作。

这段代码实现了点击列表项后，获取其文本内容并传递给myFunction函数的功能。 myFunction函数是一个占位符，你可以根据实际需求修改其内部逻辑。 图片位置保持不变。

以上就是如何用JavaScript获取点击的列表项内容并传递给函数？的详细内容，更多请关注创想鸟其它相关文章！

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
Smarty模板中如何动态构建变量名并访问？
上一篇 2025年12月10日 02:59:15
PHP中如何将十六进制数值转换为十六进制字符串？
下一篇 2025年12月10日 02:59:35

相关推荐

  • 优化Java代码：使用除法和取模运算简化找零计算

    优化Java代码：使用除法和取模运算简化找零计算优化Java代码：使用除法和取模运算简化找零计算优化Java代码：使用除法和取模运算简化找零计算优化Java代码：使用除法和取模运算简化找零计算

    本文旨在帮助Java初学者优化其找零计算代码，通过使用除法和取模运算，避免冗长的while循环，从而提高代码效率和可读性。我们将提供详细的代码示例和解释，帮助读者理解并掌握这种更简洁的实现方式。 原代码使用多个while循环来计算每种面额的硬币数量，这使得代码冗长且不易维护。更优的解决方案是使用除法…

    程序猿的头像 程序猿
    2026年9月29日 • 用户投稿
    000
  • 调试PHP与MySQL数据库交互时的逻辑错误 用户投稿

    调试PHP与MySQL数据库交互时的逻辑错误

    调试php与mysql交互时的逻辑错误需要通过以下步骤：1. sql查询验证：在数据库客户端中运行查询，确保正确执行。2. 数据类型检查：确保php传递的数据类型与数据库字段匹配。3. php逻辑逐步调试：使用var_dump()或print_r()输出变量值。4. 使用事务管理数据一致性。5. 启…

    程序猿的头像 程序猿
    2026年9月29日
    300

  • Java条件语句优化：提升代码可读性和简洁性

    Java条件语句优化：提升代码可读性和简洁性Java条件语句优化：提升代码可读性和简洁性Java条件语句优化：提升代码可读性和简洁性Java条件语句优化：提升代码可读性和简洁性

    本文旨在帮助Java开发者优化复杂的条件语句，特别是涉及多个条件判断的if语句。通过反转条件和运用德摩根定律，我们可以将原本冗长且难以理解的代码简化为更清晰、更易维护的形式。本文将提供详细的步骤和示例，帮助你编写更优雅的Java代码。 在编写Java代码时，经常会遇到需要处理多个条件判断的if语句。…

    程序猿的头像 程序猿
    2026年9月28日 • 用户投稿
    100

  • 优化 Java 条件语句：避免嵌套和空语句，提升代码可读性

    优化 Java 条件语句：避免嵌套和空语句，提升代码可读性优化 Java 条件语句：避免嵌套和空语句，提升代码可读性优化 Java 条件语句：避免嵌套和空语句，提升代码可读性优化 Java 条件语句：避免嵌套和空语句，提升代码可读性

    本文旨在帮助开发者优化 Java 中复杂的条件语句，特别是涉及多个条件判断的情况。通过反转条件、应用德摩根定律等技巧，可以有效避免嵌套的 if 语句和空 if 块，从而提升代码的可读性和简洁性，减少潜在的错误。 在编写 Java 代码时，复杂的条件语句往往会降低代码的可读性和维护性。嵌套的 if 语…

    程序猿的头像 程序猿
    2026年9月28日 • 用户投稿
    000

  • JNA高级教程：如何高效映射C语言嵌套结构体与联合体

    JNA高级教程：如何高效映射C语言嵌套结构体与联合体JNA高级教程：如何高效映射C语言嵌套结构体与联合体JNA高级教程：如何高效映射C语言嵌套结构体与联合体JNA高级教程：如何高效映射C语言嵌套结构体与联合体

    本教程深入探讨了JNA在Java与C语言之间进行复杂数据类型映射的机制，特别是针对包含嵌套结构体和联合体（Union）的场景。文章通过分析一个实际的错误案例，详细阐述了JNA对Java类继承Structure或Union的严格要求，并提供了两种核心解决方案：一是直接构建与C语言定义精确对应的JNA映…

    程序猿的头像 程序猿
    2026年9月28日 • 用户投稿
    100

  • 深入理解Java泛型：类型参数与方法重载的实践指南

    深入理解Java泛型：类型参数与方法重载的实践指南深入理解Java泛型：类型参数与方法重载的实践指南深入理解Java泛型：类型参数与方法重载的实践指南深入理解Java泛型：类型参数与方法重载的实践指南

    本文深入探讨了Java泛型中关于类型参数与泛型类实例在方法签名中的区别，以及由此引发的类型不匹配问题。通过一个具体的代码示例，详细解析了为何在泛型方法中，直接传入泛型类实例或其内部类型参数会引发编译错误，并提供了利用方法重载这一核心机制来优雅地解决此类问题的专业指导和示例代码，帮助开发者清晰理解“h…

    程序猿的头像 程序猿
    2026年9月28日 • 用户投稿
    200

  • sublime怎么设置字体渲染_Sublime字体抗锯齿与渲染效果优化

    sublime怎么设置字体渲染_Sublime字体抗锯齿与渲染效果优化sublime怎么设置字体渲染_Sublime字体抗锯齿与渲染效果优化sublime怎么设置字体渲染_Sublime字体抗锯齿与渲染效果优化sublime怎么设置字体渲染_Sublime字体抗锯齿与渲染效果优化

    启用ClearType提升Windows下字体清晰度；2. 在Sublime中设置合适字体与subpixel_antialias；3. 避免非整数缩放防模糊；4. 可选Fira Code连字字体优化可读性。 Sublime Text 的字体渲染效果直接影响编码体验，清晰锐利的字体能减轻视觉疲劳。默认…

    程序猿的头像 程序猿
    2026年9月28日 • 用户投稿
    100
  • Java语法基础中++i和i++的区别 用户投稿

    Java语法基础中++i和i++的区别

    答案：++i是先加后用，i++是先用后加。前者先将i加1再参与运算，后者先使用原值再加1，两者在赋值和表达式中结果不同。 在Java语法中，++i 和 i++ 都是自增操作符，作用是将变量 i 的值加1，但它们在使用时的执行时机和返回值有重要区别。 1. ++i（前置自增） 前置自增表示先将变量 i…

    程序猿的头像 程序猿
    2026年9月27日
    100

  • Java Stream API处理嵌套对象字段求和：以购物车条目为例

    Java Stream API处理嵌套对象字段求和：以购物车条目为例Java Stream API处理嵌套对象字段求和：以购物车条目为例Java Stream API处理嵌套对象字段求和：以购物车条目为例Java Stream API处理嵌套对象字段求和：以购物车条目为例

    本文深入探讨如何利用Java Stream API高效地对复杂嵌套对象中的数值字段进行聚合求和。通过一个购物车条目的具体案例，演示了如何从多层级对象中提取并累加BigDecimal类型的费用数据，强调了mapToDouble、BigDecimal的精确计算以及在处理可能为空的字段时，结合注解进行nu…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • sublime的auto match enabled是什么意思_sublime Auto Match Enabled功能解释

    sublime的auto match enabled是什么意思_sublime Auto Match Enabled功能解释sublime的auto match enabled是什么意思_sublime Auto Match Enabled功能解释sublime的auto match enabled是什么意思_sublime Auto Match Enabled功能解释sublime的auto match enabled是什么意思_sublime Auto Match Enabled功能解释

    Auto Match Enabled 是 Sublime Text 的自动匹配功能，开启后可自动补全并高亮括号、引号及标签。输入左括号 (、[、{ 或引号时，系统自动补全右侧符号，并将光标置于中间；光标位于符号上时，配对符号会被高亮显示。在 HTML/XML 中，输入起始标签如 会自动生成闭合标签 …

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    200
  • 如何用Java实现简单的学生成绩统计功能 用户投稿

    如何用Java实现简单的学生成绩统计功能

    首先处理空数组边界情况，再计算总分85.5+92.0+78.5+96.0+88.0=440.0，平均分88.00，最高分96.0，最低分78.5，及格人数5/5。 要实现一个简单的学生成绩统计功能，可以用Java编写一个控制台程序，完成成绩录入、计算总分、平均分、最高分、最低分以及统计及格人数等基本…

    程序猿的头像 程序猿
    2026年9月27日
    100

  • sublime怎么设置jsx和tsx的区别高亮_sublime JSX与TSX区别高亮配置

    sublime怎么设置jsx和tsx的区别高亮_sublime JSX与TSX区别高亮配置sublime怎么设置jsx和tsx的区别高亮_sublime JSX与TSX区别高亮配置sublime怎么设置jsx和tsx的区别高亮_sublime JSX与TSX区别高亮配置sublime怎么设置jsx和tsx的区别高亮_sublime JSX与TSX区别高亮配置

    首先安装Babel插件支持JSX，再安装TypeScript插件处理TSX；然后将.jsx文件关联到JavaScript (Babel)语法，.tsx文件设置为TypeScript或TypeScriptReact模式，即可实现正确语法高亮。 Sublime Text 要实现 JSX 和 TSX 文件…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    200

  • Java 8中的Stream API有哪些常用操作？它是惰性求值的吗？

    Java 8中的Stream API有哪些常用操作？它是惰性求值的吗？Java 8中的Stream API有哪些常用操作？它是惰性求值的吗？Java 8中的Stream API有哪些常用操作？它是惰性求值的吗？Java 8中的Stream API有哪些常用操作？它是惰性求值的吗？

    答案：Java 8的Stream API通过中间操作和终端操作实现惰性求值，提升性能与代码可读性。中间操作如filter、map返回新流且惰性执行，终端操作如forEach、collect触发计算并产生结果。惰性求值避免不必要的计算，支持短路操作，优化管道处理，适用于无限流。使用时需避免副作用、重复…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    200

  • sublime怎么解决高分屏下UI过小的问题_sublime界面缩放与高清屏适配方法

    sublime怎么解决高分屏下UI过小的问题_sublime界面缩放与高清屏适配方法sublime怎么解决高分屏下UI过小的问题_sublime界面缩放与高清屏适配方法sublime怎么解决高分屏下UI过小的问题_sublime界面缩放与高清屏适配方法sublime怎么解决高分屏下UI过小的问题_sublime界面缩放与高清屏适配方法

    首先修改配置文件实现高分屏适配，通过Preferences→Settings添加”ui_scale”:1.25可调整整体界面缩放，其次单独设置”font_size”:14提升代码可读性，最后利用Package Control安装Ayu等现代主题优化显示…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    500

  • MySQL中文标题大小写区分问题探讨

    MySQL中文标题大小写区分问题探讨MySQL中文标题大小写区分问题探讨MySQL中文标题大小写区分问题探讨MySQL中文标题大小写区分问题探讨

    MySQL中文标题大小写区分问题探讨 MySQL是一个常用的开源关系型数据库管理系统，具有良好的性能和稳定性，在开发中被广泛应用。在使用MySQL过程中，我们经常会遇到大小写区分的问题，尤其是涉及到中文标题的情况下。本文将探讨MySQL中文标题大小写区分的问题，并提供具体的代码示例帮助读者理解和解决…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    100
  • 利用Laravel高效串联查询：从上一个结果获取数据 用户投稿

    利用Laravel高效串联查询：从上一个结果获取数据

    本教程旨在解决laravel中基于前一个查询结果进行后续查询的常见问题。文章详细阐述了如何避免因`take(1)->toarray()`导致的多维数组问题，并优化了查询效率，通过使用`first()`方法获取单个记录，并直接在数据库层面进行过滤，而非在内存中处理大量数据，从而提升应用性能和代码…

    程序猿的头像 程序猿
    2026年9月24日
    700

  • mysql储存过程中循环语句有哪些

    mysql储存过程中循环语句有哪些mysql储存过程中循环语句有哪些mysql储存过程中循环语句有哪些mysql储存过程中循环语句有哪些

    MySQL存储过程中提供WHILE和REPEAT两种循环语句：WHILE循环：根据条件重复执行代码块，条件为真时继续执行。REPEAT循环：先执行代码块，再检查条件是否为真，为假则再次执行代码块。 MySQL存储过程中的循环语句 MySQL存储过程中支持以下两种循环语句： WHILE 循环 WHIL…

    程序猿的头像 程序猿
    2026年9月24日 • 用户投稿
    000
  • mysql临时表如何使用_PHP中操作mysql临时表的具体步骤 用户投稿

    mysql临时表如何使用_PHP中操作mysql临时表的具体步骤

    MySQL临时表仅在当前会话可见，连接关闭后自动删除，适合中间数据处理。使用PHP操作时，先通过mysqli或PDO建立数据库连接，再执行CREATE TEMPORARY TABLE语句创建临时表，随后可像普通表一样进行INSERT、SELECT及JOIN等操作。临时表可与永久表同名且优先被使用，支…

    程序猿的头像 程序猿
    2026年9月24日
    100
  • VSCode 如何自定义编辑器的选中内容动画效果 VSCode 选中内容动画效果的自定义创意方法​ 用户投稿

    VSCode 如何自定义编辑器的选中内容动画效果 VSCode 选中内容动画效果的自定义创意方法​

    首先可通过修改settings.json中的workbench.colorcustomizations来自定义选中颜色，1. 添加”editor.selectionbackground”设置背景色，2. 添加”editor.selectionforeground&…

    程序猿的头像 程序猿
    2026年9月24日
    700
  • Java中接口常量和类常量的使用区别 用户投稿

    Java中接口常量和类常量的使用区别

    接口常量默认public static final，用于行为契约但易导致职责模糊；类常量可用不同访问修饰符，更适合封装和维护。现代Java推荐使用专用常量类、枚举、私有静态常量或配置文件管理常量，以提升代码清晰度与可维护性。 Java中接口常量和类常量，核心区别在于它们的定义位置和隐式属性。接口常量…

    程序猿的头像 程序猿
    2026年9月24日
    100

发表回复

登录后才能评论
关注微信