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

Question

This seems a little verbose, is there a better way of doing this? I'm using jquery to change a navigations aria attributes from hidden=true to hidden=false on hover (same for expanded). I'm sure this can be done in far fewer lines of code but i'm not quite sure how. I can sense a thousand eyes rolling, sorry guys I'm a noob.

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');
});

Delete the array, put a common class on all those elements, and then assign a single event handler to that class and reference the element that raised the event using this. — Rory McCrossan
– Rory McCrossan, Commented May 29, 2015 at 13:05
Almost Rory, but it this will add the attributes to the parent not the child. Thanks for taking the time to look thought. — Sharper
– Sharper, Commented May 29, 2015 at 13:33

A. Wolff · Accepted Answer · 2015-05-29 13:12:38Z

2

Use a common class as selector then target specific element regarding the element ID, using thisinside hover() in/out handler:

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

I guess intead of targeting an ID, you could use some index, depending your HTML markup.

edited May 29, 2015 at 13:12

answered May 29, 2015 at 13:06

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sharper Over a year ago

This cracked it! Thanks very much.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related