js选中div js选择器 div下的元素

本文将介绍如何使用 JavaScript 将 HTML 中的 div 元素模拟为单选按钮，并在用户选择某个 div 时，获取该 div 内部元素的值并存储到变量中。通过监听 div 的点击事件，动态改变选中 div 的背景颜色，并通过此关键字和 find() 方法，精准定位并提取目标数据，实现类似单选按钮的功能。实现步骤HTML结构

首先，需要一个包含多个div元素的HTML结构。每个div元素都具有相同的类名（例如包），并且包含需要提取数据的子元素。

lt；div class=quot；col-lg-4 text-centerquot；gt； lt；div class=quot；packagequot；gt； lt；input type=quot；hiddenquot； class=quot；packageIdquot； value=quot；5quot； /gt； lt；p class=quot；smallquot；gt；深度清洁lt；/pgt； lt；h4 class=quot；packageTitlequot；gt；深度清洁lt；/h4gt； lt；pgt；全包清洁服务lt；/pgt； lt；p class=quot；smallquot；gt；清洁工每位价格lt；/pgt； lt；p class=quot；price packagePricequot；gt；41.90 lt；span class=quot；smallquot；gt；/hlt；/spangt；lt；/pgt； lt；/divgt；lt；/divgt；lt；div class=quot；col-lg-4 text-centerquot；gt； lt；div class=quot；packagequot；gt； lt；input type=quot；hiddenquot； class=quot；packageIdquot； value=quot；4quot； /gt； lt；p class=quot；smallquot；gt；最后一分钟lt；/pgt； lt；h4 class=quot；packageTitlequot；gt；最后一分钟清洁lt；/h4gt； lt；pgt；最后一分钟amp； 派对后清洁lt；/pgt； lt；p class=quot；smallquot；gt；清洁工每人价格lt；/pgt； lt；p class=quot；price packagePricequot；gt；43.90 lt；span class=quot；smallquot；gt；/hlt；/spangt；lt；/pgt； lt；/divgt；lt；/divgt；lt；div class=quot；col-lg-4 text-centerquot；gt； lt；div class=quot；packagequot；gt； lt；input type=quot；hiddenquot； class=quot；packageIdquot； value=quot；3quot； /gt； lt；p class=quot；smallquot；gt；搬家lt；/pgt； lt；h4 class=quot；packageTitlequot；gt；搬入搬出清洁lt；/h4gt； lt；pgt；F

或 move-ins，和 move-outslt；/pgt； lt；p class=quot；smallquot；gt；每次清洁价格lt；/pgt； lt；p class=quot；价格套餐价格quot；gt；41.90 lt；span class=quot；smallquot；gt；/hlt；/spangt；lt；/pgt； lt；/divgt；lt；/divgt；登录后复制 JavaScript 代码

接下来，使用JavaScript代码来实现div的单选按钮行为，并在点击时获取数据。var packageId = quot；quot；；var packageTitle = quot；quot；；var packagePrice = quot；quot；；var packages = document.getElementsByClassName('package')；Array.prototype.forEach.call(packages， function (element) { element.addEventListener('click'， function () { // 重置所有package的背景颜色 $('.package').css(quot；background-colorquot；， quot；#FFFFFFquot；)； // 设置当前点击的包的背景颜色 const elem = $(this)； elem.css(quot；background-colorquot；， quot；#FCF6CCquot 点击；)； // 获取当前的包内部的数据 packageId = elem.find('.packageId').attr('value')； packageTitle = elem.find('.packageTitle').text()； packagePrice = elem.find('.packagePrice').text()； // 打印获取到的数据 console.log(quot；包 ID：quot；， packageId)； console.log(quot；包标题：quot；， packageTitle)； console.log(quot；包价格：quot；， packagePrice)； })；})；登录后复制

代码解释：

立即学习“Java学习笔记（深入）”；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 模拟为单选按钮并获取其内部数据的详细内容，更多请关注乐哥常识网相关文章！