本文将介绍如何使用 jQuery 选择器来选取类名以数字结尾的元素，并实现鼠标悬停 (hover) 时显示对应内容的效果。通过修改 HTML 结构，添加 data-id 属性，并使用 jQuery 的 hover() 函数，我们可以轻松实现这一功能。本文提供了详细的代码示例和解释，帮助你理解和应用这种方法。
在前端开发中，经常会遇到需要根据元素的类名来选取元素并进行操作的情况。当类名具有一定的规律，例如以数字结尾时，我们可以利用 jQuery 的选择器来简化代码。本教程将详细介绍如何使用 jQuery 选择器来选取类名以数字结尾的元素，并实现鼠标悬停 (hover) 时显示对应内容的效果。
1. HTML 结构调整
为了实现 hover 时显示对应内容的效果，我们需要对 HTML 结构进行一些调整。
首先，为每个 cr-icon-* 元素添加 data-id 属性，用于标识它所对应的 cr-box-* 元素。
其次，将 icon 元素改为 button，方便操作。
test1test2test3
在这个 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 .cr-box-1, .cr-box-2, .cr-box-3 { width: 100px; height: 50px; border: 1px solid black; text-align: center; line-height: 50px; }$('[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"); } }); });test1test2test3
4. 注意事项
确保引入 jQuery 库。data-id 属性的值应该与 cr-box-* 元素的类名中的数字部分一致。可以根据实际情况修改 CSS 样式。当 cr-icon-* 元素和 cr-box-* 元素数量较多时，可以考虑使用更高效的选择器和算法来优化代码。
5. 总结
本教程介绍了如何使用 jQuery 选择器来选取类名以数字结尾的元素，并实现鼠标悬停 (hover) 时显示对应内容的效果。通过修改 HTML 结构，添加 data-id 属性，并使用 jQuery 的 hover() 函数，我们可以轻松实现这一功能。希望本教程能够帮助你理解和应用这种方法。
以上就是使用 jQuery 选择器处理类名以数字结尾的元素并实现 Hover 效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1264226.html
微信扫一扫 
支付宝扫一扫 
