使用 JavaScript 将 Div 模拟为单选按钮并获取其内部数据-html教程-PHP中文网

使用 JavaScript 将 Div 模拟为单选按钮并获取其内部数据

聖光之護

发布： 2025-08-30 23:51:24

原创

584人浏览过

使用 javascript 将 div 模拟为单选按钮并获取其内部数据

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

实现步骤

HTML 结构

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

<div class="col-lg-4 text-center">
    <div class="package">
        <input type="hidden" class="packageId" value="5" />
        <p class="small">Deep</p>
        <h4 class="packageTitle">Deep Cleaning</h4>
        <p>All-inclusive cleaning service</p>
        <p class="small">Price Per Cleaner</p>
        <p class="price packagePrice">41.90 <span class="small">/h</span></p>
    </div>
</div>
<div class="col-lg-4 text-center">
    <div class="package">
        <input type="hidden" class="packageId" value="4" />
        <p class="small">Last Minute</p>
        <h4 class="packageTitle">Last-Minute Cleaning</h4>
        <p>Last minute & after party cleaning</p>
        <p class="small">Price Per Cleaner</p>
        <p class="price packagePrice">43.90 <span class="small">/h</span></p>
    </div>
</div>
<div class="col-lg-4 text-center">
    <div class="package">
        <input type="hidden" class="packageId" value="3" />
        <p class="small">Moving</p>
        <h4 class="packageTitle">Move-In-Out Cleaning</h4>
        <p>For move-ins, and move-outs</p>
        <p class="small">Price Per Cleaner</p>
        <p class="price packagePrice">41.90 <span class="small">/h</span></p>
    </div>
</div>

登录后复制

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);
    });
});

登录后复制

代码解释:

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

查看详情

立即学习“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 模拟为单选按钮并获取其内部数据的详细内容，更多请关注php中文网其它相关文章！