当前位置：首页 > 文章列表 > 文章 > php教程 > jQuery选择类名以数字结尾元素方法

jQuery选择类名以数字结尾元素方法

2025-07-12 16:42:24 0浏览收藏

本文详细讲解了如何利用 jQuery 选择器高效处理类名以数字结尾的 HTML 元素，并实现常见的鼠标悬停 (hover) 互动效果。面对前端开发中根据特定规律类名选取元素的需求，本文提供了一种简洁实用的解决方案。通过巧妙地调整 HTML 结构，引入 `data-id` 属性，并结合 jQuery 的 `hover()` 函数，开发者可以轻松实现类名与内容之间的联动。文中包含完整的代码示例，逐步展示了如何隐藏初始元素、动态显示对应内容，以及如何优化代码逻辑。学习本文，你将掌握一种实用的 jQuery 技巧，提升前端开发效率，为用户带来更友好的交互体验。

使用 jQuery 选择器处理类名以数字结尾的元素并实现 Hover 效果

本文将介绍如何使用 jQuery 选择器来选取类名以数字结尾的元素，并实现鼠标悬停 (hover) 时显示对应内容的效果。通过修改 HTML 结构，添加 data-id 属性，并使用 jQuery 的 hover() 函数，我们可以轻松实现这一功能。本文提供了详细的代码示例和解释，帮助你理解和应用这种方法。

在前端开发中，经常会遇到需要根据元素的类名来选取元素并进行操作的情况。当类名具有一定的规律，例如以数字结尾时，我们可以利用 jQuery 的选择器来简化代码。本教程将详细介绍如何使用 jQuery 选择器来选取类名以数字结尾的元素，并实现鼠标悬停 (hover) 时显示对应内容的效果。

1. HTML 结构调整

为了实现 hover 时显示对应内容的效果，我们需要对 HTML 结构进行一些调整。

首先，为每个 cr-icon-* 元素添加 data-id 属性，用于标识它所对应的 cr-box-* 元素。

其次，将 icon 元素改为 button，方便操作。

<div class="cr-wrap">
    <button class="cr-icon-1" data-id="1">icon 1</button>
    <button class="cr-icon-2" data-id="2">icon 2</button>
    <button class="cr-icon-3" data-id="3">icon 3</button>
</div>

<div class="cr-wrap">
    <div class="cr-box-1 default">test1</div>
    <div class="cr-box-2">test2</div>
    <div class="cr-box-3">test3</div>
</div>

在这个 HTML 结构中，每个 cr-icon-* 元素都有一个对应的 cr-box-* 元素，它们的 data-id 属性和类名中的数字部分一致。

2. jQuery 代码实现

接下来，我们使用 jQuery 来实现 hover 效果。

首先，我们需要隐藏所有 cr-box-* 元素，除了默认显示的 cr-box-1 元素。

$('[class^="cr-box"]').not('.default').css("opacity", "0");

这行代码使用 [class^="cr-box"] 选择器选取所有类名以 "cr-box" 开头的元素，然后使用 .not('.default') 排除掉类名为 "default" 的元素，最后使用 .css("opacity", "0") 将它们的透明度设置为 0，从而隐藏它们。

然后，我们使用 hover() 函数来为 cr-icon-* 元素添加 hover 效果。

$('[class^="cr-icon"]').hover(function (i, e) {
    var id =  $(this).attr('data-id');
    var el = $('[class^="cr-box"]')[id - 1];
    $(el).css("opacity", "1");
}, function (i, e) {
    var id = $(this).attr('data-id');
    $('[class^="cr-icon"]').each(function (i, e) {

        if (id != $(e).attr('data-id')) {
            var el = $('[class^="cr-box"]')[id - 1];
            $(el).not('.default').css("opacity", "0");
        }
    });
});

hover() 函数接受两个参数：鼠标进入元素时执行的函数和鼠标离开元素时执行的函数。

在鼠标进入元素时执行的函数中，我们首先使用 $(this).attr('data-id') 获取当前 cr-icon-* 元素的 data-id 属性值，然后使用 $('[class^="cr-box"]')[id - 1] 选取对应的 cr-box-* 元素，最后使用 .css("opacity", "1") 将它的透明度设置为 1，从而显示它。

在鼠标离开元素时执行的函数中，我们首先获取当前 cr-icon-* 元素的 data-id 属性值，然后遍历所有 cr-icon-* 元素，如果当前遍历到的元素的 data-id 属性值与鼠标离开的元素的 data-id 属性值不相等，则隐藏对应的 cr-box-* 元素。

3. 完整代码示例

将上面的 HTML 和 jQuery 代码整合起来，就得到了完整的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Hover Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .cr-box-1, .cr-box-2, .cr-box-3 {
            width: 100px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>

<div class="cr-wrap">
    <button class="cr-icon-1" data-id="1">icon 1</button>
    <button class="cr-icon-2" data-id="2">icon 2</button>
    <button class="cr-icon-3" data-id="3">icon 3</button>
</div>

<div class="cr-wrap">
    <div class="cr-box-1 default">test1</div>
    <div class="cr-box-2">test2</div>
    <div class="cr-box-3">test3</div>
</div>

<script>
    $('[class^="cr-box"]').not('.default').css("opacity", "0");

    $('[class^="cr-icon"]').hover(function (i, e) {
        var id =  $(this).attr('data-id');
        var el = $('[class^="cr-box"]')[id - 1];
        $(el).css("opacity", "1");
    }, function (i, e) {
        var id = $(this).attr('data-id');
        $('[class^="cr-icon"]').each(function (i, e) {

            if (id != $(e).attr('data-id')) {
                var el = $('[class^="cr-box"]')[id - 1];
                $(el).not('.default').css("opacity", "0");
            }
        });
    });
</script>

</body>
</html>