本文将介绍如何使用 JavaScript 将 HTML 中的 div 元素模拟为单选按钮，并在用户选择某个 div 时，获取该 div 内部特定元素的值并存储到变量中。通过监听 div 的点击事件，动态改变选中 div 的背景颜色，并通过 this 关键字和 find() 方法，精准定位并提取目标数据，实现类似单选按钮的功能。
实现步骤
HTML 结构
首先，需要一个包含多个 div 元素的 HTML 结构。每个 div 元素都具有相同的类名（例如 package），并且包含需要提取数据的子元素。
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 代码
接下来，使用 JavaScript 代码来实现 div 的单选按钮行为，并在点击时获取数据。
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 的背景颜色 const elem = $(this); elem.css("background-color", "#FCF6CC"); // 获取当前点击的 package 内部的数据 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 元素的背景颜色重置为白色，模拟单选按钮的互斥效果。const elem = $(this);: 使用 $(this) 获取当前点击的 div 元素，并将其存储在变量 elem 中。elem.css(“background-color”, “#FCF6CC”);: 设置当前点击的 div 元素的背景颜色，表示选中状态。elem.find(‘.packageId’).attr(‘value’): 使用 elem.find() 方法在当前点击的 div 元素内部查找类名为 packageId 的元素，并使用 .attr(‘value’) 获取其 value 属性的值。elem.find(‘.packageTitle’).text(): 使用 elem.find() 方法在当前点击的 div 元素内部查找类名为 packageTitle 的元素，并使用 .text() 获取其文本内容。elem.find(‘.packagePrice’).text(): 使用 elem.find() 方法在当前点击的 div 元素内部查找类名为 packagePrice 的元素，并使用 .text() 获取其文本内容。console.log(…): 将获取到的数据打印到控制台。
注意事项
确保引入 jQuery 库，因为代码中使用了 jQuery 的 $ 符号和相关方法。$(this) 指的是当前点击的 div 元素，通过它可以使用 jQuery 的 find() 方法在当前 div 内部查找元素。使用 elem.find() 方法可以确保只在当前点击的 div 内部查找目标元素，避免获取到其他 div 中的数据。
总结
通过以上步骤，就可以使用 JavaScript 将 div 元素模拟为单选按钮，并在用户选择某个 div 时，获取该 div 内部特定元素的值并存储到变量中。 这种方法可以灵活地应用于各种需要自定义选择控件的场景。
以上就是使用 JavaScript 将 Div 模拟为单选按钮并获取其内部数据的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574300.html
微信扫一扫 
支付宝扫一扫 
