懸停時將帶有jQuery的類添加到特定的菜單項

Question

當將菜單懸停在圖像上時，我想將帶有jQuery的類添加到特定的菜單項。 菜單項具有在其他地方進行硬編碼的項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');
    });
});

我已經嘗試過此代碼，但是將鼠標懸停在所有菜單項上時會得到額外的類“ 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');
    });
});