JS实现Div单选与数据获取方法

本文详细介绍了如何利用JavaScript实现Div元素的单选按钮效果，并提取选中Div中的数据。通过模拟单选按钮，用户可以自定义Div样式，提升用户体验。文章重点讲解了如何使用`$(this).find()`方法精准定位并提取被点击Div内的`packageId`、`packageTitle`和`packagePrice`等信息，有效避免了因类名重复导致的数据提取错误。此外，还提供了完整的代码示例，方便开发者快速理解和应用，适用于需要自定义单选按钮样式并提取相关数据的Web开发场景。本教程还强调了jQuery库的引入以及选择器在HTML结构变化时的调整，确保代码的稳定性和可维护性。

本教程将介绍如何使用 JavaScript 将 HTML 中的 div 元素模拟为单选按钮，并在用户选择某个 div 时，提取该 div 内部特定元素的值，并将这些值存储到变量中。我们将重点讲解如何避免因类名重复而导致的数据提取错误，并提供清晰的代码示例。

实现 Div 的单选按钮效果

首先，我们需要 HTML 结构。假设我们有多个 div 元素，它们具有相同的类名（例如，package），并且每个 div 内部包含一些我们需要提取数据的元素：

<div class="col-lg-4 text-center">
    <div class="package">
        &lt;input type=&quot;hidden&quot; class=&quot;packageId&quot; value=&quot;5&quot; /&gt;
        <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">
        &lt;input type=&quot;hidden&quot; class=&quot;packageId&quot; value=&quot;4&quot; /&gt;
        <p class="small">Last Minute</p>
        <h4 class="packageTitle">Last-Minute Cleaning</h4>
        <p>Last minute &amp; 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">
        &lt;input type=&quot;hidden&quot; class=&quot;packageId&quot; value=&quot;3&quot; /&gt;
        <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 来实现以下功能：

1. 点击某个 div 时，改变其背景颜色，以突出显示选中状态。
2. 提取被点击 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 内部查找元素，避免因类名重复而导致的数据提取错误。 这种方法可以应用于各种需要自定义单选按钮样式并提取相关数据的场景。

理论要掌握，实操不能落！以上关于《JS实现Div单选与数据获取方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！