我可以循环遍历数组以在悬停时更改元素属性吗

Question

这似乎有点冗长，有更好的方法吗？我正在使用 jquery 将悬停时的导航 aria 属性从 hidden=true 更改为 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');
});

Answer 1

使用通用的 class 作为选择器，然后使用 thisinside hover() in/out 处理程序来针对有关元素 ID 的特定元素：

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

我想如果不以 ID 为目标，您可以使用一些索引，具体取决于您的 HTML 标记。

我可以循环遍历数组以在悬停时更改元素属性吗

Can I loop through an array to change and elements attributes on hover

navigation

arrays

jquery

hover