悬停时将带有 jQ​​uery 的类添加到特定的菜单项

Question

当悬停带有图像的菜单时，我想将一个带有 jQ​​uery 的类添加到特定的菜单项。菜单项具有在其他地方硬编码的项目 ID。下面的代码是有效的，但是我必须对每个特定的菜单项进行编码，这不是我的意图。

jQuery(document).ready(function(){
    jQuery('.menu > li.item-447 > a').hover(function() {
        jQuery('.menu > li.item-447 > a > span').toggleClass('nav-label');
    });
    jQuery('.menu > li.item-449 > a').hover(function() {
        jQuery('.menu > li.item-449 > a > span').toggleClass('nav-label');
    });
    jQuery('.menu > li.item-... > a').hover(function() {
        jQuery('.menu > li.item-... > a > span').toggleClass('nav-label');
    });
});

我已经尝试过这段代码，但是在悬停所有菜单项时会获得额外的类“导航标签”。

jQuery(document).ready(function(){
    jQuery('.menu > li.item > a').hover(function() {
        jQuery('a', this); 
        jQuery( '.menu > li > a > span' ).toggleClass( 'nav-label' );
    });
});

有什么建议吗？

Answer 1

您可以通过this 关键字获取特定的菜单项，并使用jQuery(this) 将其转换为jQuery 对象。

试试这个：

jQuery(document).ready(function(){
    jQuery('.menu > li > a').hover(function() {
        jQuery(this).children('span').toggleClass('nav-label');
    });
});