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

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

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

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

1. HTML 结构调整

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

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

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

    icon 1
    icon 2
    icon 3



    
test1
    
test2
    
test3

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

    
    
    




    icon 1
    icon 2
    icon 3



    
test1
    
test2
    
test3

4. 注意事项

• 确保引入 jQuery 库。
• data-id 属性的值应该与 cr-box-* 元素的类名中的数字部分一致。
• 可以根据实际情况修改 CSS 样式。
• 当 cr-icon-* 元素和 cr-box-* 元素数量较多时，可以考虑使用更高效的选择器和算法来优化代码。

5. 总结

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

到这里，我们也就讲完了《jQuery选择类名以数字结尾元素方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！