使用 jQuery 选择器处理类名以数字结尾的元素并实现 Hover 效果-php教程-PHP中文网

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

霞舞

发布： 2025-07-12 16:24:20

原创

893人浏览过

使用 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 代码整合起来，就得到了完整的代码示例：




    jQuery Hover Example
    
    



<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^=&quot;cr-box&quot;]').not('.default').css(&quot;opacity&quot;, &quot;0&quot;);

    $('[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>

登录后复制