本文将介绍如何使用 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^="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>
4. 注意事项
- 确保引入 jQuery 库。
- data-id 属性的值应该与 cr-box-* 元素的类名中的数字部分一致。
- 可以根据实际情况修改 CSS 样式。
- 当 cr-icon-* 元素和 cr-box-* 元素数量较多时，可以考虑使用更高效的选择器和算法来优化代码。
5. 总结
本教程介绍了如何使用 jQuery 选择器来选取类名以数字结尾的元素，并实现鼠标悬停 (hover) 时显示对应内容的效果。通过修改 HTML 结构，添加 data-id 属性，并使用 jQuery 的 hover() 函数，我们可以轻松实现这一功能。希望本教程能够帮助你理解和应用这种方法。
