本教程将介绍如何使用 JavaScript 将 HTML 中的 div 元素模拟为单选按钮，并在用户选择某个 div 时，提取该 div 内部特定元素的值，并将这些值存储到变量中。我们将重点讲解如何避免因类名重复而导致的数据提取错误，并提供清晰的代码示例。
实现 Div 的单选按钮效果
首先，我们需要 HTML 结构。假设我们有多个 div 元素，它们具有相同的类名（例如，package），并且每个 div 内部包含一些我们需要提取数据的元素：
Deep
Deep Cleaning
All-inclusive cleaning service
Price Per Cleaner
41.90 /h
Last Minute
Last-Minute Cleaning
Last minute & after party cleaning
立即学习“Java免费学习笔记（深入）”；
Price Per Cleaner
43.90 /h
Moving
Move-In-Out Cleaning
For move-ins, and move-outs
Price Per Cleaner
41.90 /h
接下来，我们将使用 JavaScript 来实现以下功能：
点击某个 div 时，改变其背景颜色，以突出显示选中状态。提取被点击 div 内部特定元素的值，并将其存储到变量中。
JavaScript 代码实现
var packageId = "";var packageTitle = "";var packagePrice = "";var packages = document.getElementsByClassName('package');Array.prototype.forEach.call(packages, function (element) { element.addEventListener('click', function () { // 移除所有 package 的背景色 $('.package').css("background-color", "#FFFFFF"); // 设置当前点击的 package 的背景色 $(this).css("background-color", "#FCF6CC"); // 使用 $(this) 查找当前点击的 package 内部的元素 const elem = $(this); packageId = elem.find('.packageId').attr('value'); packageTitle = elem.find('.packageTitle').text(); packagePrice = elem.find('.packagePrice').text(); console.log("Package ID:", packageId); console.log("Package Title:", packageTitle); console.log("Package Price:", packagePrice); });});
代码解释：
document.getElementsByClassName(‘package’): 获取所有类名为 package 的元素。Array.prototype.forEach.call(packages, function (element) { … }): 遍历所有 package 元素，并为每个元素添加点击事件监听器。$(‘.package’).css(“background-color”, “#FFFFFF”);: 移除所有 package 元素的背景颜色，确保只有一个 div 处于选中状态。$(this).css(“background-color”, “#FCF6CC”);: $(this) 指的是当前点击的 div 元素，设置其背景颜色。const elem = $(this);: 将当前点击的元素缓存到 elem 变量中，方便后续查找其内部元素。elem.find(‘.packageId’).attr(‘value’): 在当前点击的 div 元素内部查找类名为 packageId 的元素，并获取其 value 属性值。 关键点：使用 elem.find() 而不是 $(‘.packageId’)，可以确保只在当前点击的 div 内部查找，避免因类名重复而获取到错误的值。elem.find(‘.packageTitle’).text(): 在当前点击的 div 元素内部查找类名为 packageTitle 的元素，并获取其文本内容。elem.find(‘.packagePrice’).text(): 在当前点击的 div 元素内部查找类名为 packagePrice 的元素，并获取其文本内容。console.log(…): 将提取到的值打印到控制台，方便调试。
注意事项
确保引入了 jQuery 库，因为代码中使用了 $ 符号。find() 方法是 jQuery 的方法，用于在指定元素内部查找匹配选择器的元素。如果 HTML 结构发生变化，需要相应地修改 JavaScript 代码中的选择器。
总结
通过本教程，你学习了如何使用 JavaScript 将 div 元素模拟为单选按钮，并在用户选择某个 div 时，提取该 div 内部特定元素的值。 关键在于使用 $(this).find() 方法来确保只在当前点击的 div 内部查找元素，避免因类名重复而导致的数据提取错误。 这种方法可以应用于各种需要自定义单选按钮样式并提取相关数据的场景。
以上就是使用 JavaScript 将 Div 模拟为单选按钮并提取数据的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574347.html
微信扫一扫 
支付宝扫一扫 
