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

【问题标题】：Can I loop through an array to change and elements attributes on hover我可以循环遍历数组以更改悬停时的元素属性吗
【发布时间】：2015-05-29 13:00:08
【问题描述】：

这似乎有点冗长，有没有更好的方法？我正在使用 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');
});

【问题讨论】：

删除数组，在所有这些元素上放置一个公共类，然后为该类分配一个事件处理程序，并使用this引用引发事件的元素。
几乎是 Rory，但这会将属性添加到父级而不是子级。感谢您花时间思考。

标签： jquery arrays navigation hover

【解决方案1】：

使用公共类作为选择器，然后使用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 标记。

【讨论】：

这破解了！非常感谢。