我可以通過數組循環來更改元素和懸停的元素屬性

這看起來有點冗長，有沒有更好的方法來做到這一點？我正在使用jquery將hidden = true的導航aria屬性更改爲hidden = false（懸停時相同）（展開後也是如此）。我相信這可以用很少的代碼來完成，但我不太確定如何。我可以感覺到一千個眼睛在滾動，對不起，我是一個小菜鳥。我可以通過數組循環來更改元素和懸停的元素屬性

var navArray = ['#navitem1', '#navitem2', '#navitem3', '#navitem4', '#navitem5' ] 
$(navArray[0]).hover(function(){ 
    $(navArray[0] + 'DD').attr('aria-expanded','true'); 
    $(navArray[0] + 'DD').attr('aria-hidden','false'); 
}, 
function(){ 
    $(navArray[0] + 'DD').attr('aria-expanded', 'false'); 
    $(navArray[0]+ 'DD').attr('aria-hidden', 'true'); 
}); 

$(navArray[1]).hover(function(){ 
    $(navArray[1] + 'DD').attr('aria-expanded','true'); 
    $(navArray[1] + 'DD').attr('aria-hidden','false'); 
}, 
function(){ 
    $(navArray[1] + 'DD').attr('aria-expanded', 'false'); 
    $(navArray[1]+ 'DD').attr('aria-hidden', 'true'); 
}); 
    $(navArray[2]).hover(function(){ 
    $(navArray[2] + 'DD').attr('aria-expanded','true'); 
    $(navArray[2] + 'DD').attr('aria-hidden','false'); 
}, 
function(){ 
    $(navArray[2] + 'DD').attr('aria-expanded', 'false'); 
    $(navArray[2]+ 'DD').attr('aria-hidden', 'true'); 
}); 
    $(navArray[3]).hover(function(){ 
    $(navArray[3] + 'DD').attr('aria-expanded','true'); 
    $(navArray[3] + 'DD').attr('aria-hidden','false'); 
}, 
function(){ 
    $(navArray[3] + 'DD').attr('aria-expanded', 'false'); 
    $(navArray[3]+ 'DD').attr('aria-hidden', 'true'); 
}); 
    $(navArray[4]).hover(function(){ 
    $(navArray[4] + 'DD').attr('aria-expanded','true'); 
    $(navArray[4] + 'DD').attr('aria-hidden','false'); 
}, 
function(){ 
    $(navArray[4] + 'DD').attr('aria-expanded', 'false'); 
    $(navArray[4]+ 'DD').attr('aria-hidden', 'true'); 
});

來源

2015-05-29 Sharper

刪除數組，在所有這些元素上放置一個公共類，然後將一個事件處理程序分配給該類，並引用使用'this'引發該事件的元素。 –

幾乎羅裏，但它會將屬性添加到父項而不是子項。感謝您抽出寶貴時間來思考。 – Sharper

使用一個通用類的選擇，然後針對有關元素的ID特定元素，使用this內hover() in/out處理程序：

$('.nav-item').hover(function (e) { 
    var toExpand = e.type === "mouseenter"; 
    $('#' + this.id + "DD").attr({ 
     "aria-expanded": toExpand, 
     "aria-hidden": !toExpand, 
    }); 
});

我想這一翻譯目標的ID，你可以使用一些指標，根據您的HTML標記。

來源

2015-05-29 13:06:37

這破解了！非常感謝。 – Sharper

我可以通過數組循環來更改元素和懸停的元素屬性

回答

相關問題