jQuery loop through .hover( ) function using .each( )

Question

I have a function that changes the border-color of the arrows to match the hover state colour of the buttons. It is working as 3 separate functions but I want to combine them using .each( ) Please tell me where I am going wrong

enter image description here

Vars

var btnArrowPath = '.btn + .btn-arrow';
var btnName = ['btn-infra ','btn-dev ','btn-anal '];
var btnColor = ['#286090','#449d44','#31b0d5'];
var btnRollColor = ['#337ab7','#5cb85c','#5bc0de'];

Function

 $('.btn-wrap').each(function(i, value){
    $(btnName[value] + '.btn').hover(function(i, value){
      $(btnName[value] + btnArrowPath).css('border-top-color',btnColor[value]);
   }, function(){
      $(btnName[value] + btnArrowPath).css('border-top-color',btnRollColor[value]);
   });
 });

HTML

<div class="hero-wrap">
                <div class="hero-popup">
                    <div class="row">
                        <div class="btn-wrap btn-infra">
                            <button data-trigger="focus" type="button" class="btn btn-primary" data-toggle="popover" title="Infrastructure" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="bottom">Infrastructure</button>
                            <div class="btn-arrow pull-right"></div>
                    </div>
                    </div>
                    <div class="row">
                        <div class="btn-wrap btn-dev">
                            <button data-trigger="focus" type="button" class="btn btn-info" data-toggle="popover" title="Development" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="top">Development</button>
                            <div class="btn-arrow pull-right"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="btn-wrap btn-anal">
                            <button data-trigger="focus" type="button" class="btn btn-success" data-toggle="popover" title="Analysis" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="top">Analysis</button>
                            <div class="btn-arrow pull-right"></div>
                    </div>
                </div>
            </div>]

What does it currently do? It would be helpful if you gave the css of the buttons. — EternalHour
– EternalHour, Commented Feb 27, 2015 at 1:02
Hi Clinton: I'm not sure where you are having a problem. Could you please clarify what's going wrong? — Michael Mikowski
– Michael Mikowski, Commented Feb 27, 2015 at 1:03
it currently does nothing. the function works fine if I do not use the arrays. Currently the border-color on the arrow does not change — Clinton Green
– Clinton Green, Commented Feb 27, 2015 at 1:05
I found why my method was not working I forgot to add the period in front of the classes in this array var btnName = ['btn-infra ','btn-dev ','btn-anal ']; — Clinton Green
– Clinton Green, Commented Feb 27, 2015 at 2:06

Arun P Johny · Accepted Answer · 2015-02-27 01:24:19Z

2

You want to have the hover function for the .btn element inside the .btn-wrap element, which will change the border top color of the next sibling of the hovered element, isn't it?

So

$('.btn-wrap .btn').each(function (i, value) {
    $(this).hover(function (e) {
        $(this).next('.btn-arrow').css('border-top-color', btnColor[i]);
    }, function () {
        $(this).next('.btn-arrow').css('border-top-color', btnRollColor[i]);
    });
});

Demo: Fiddle

You can do it without the loop like

var $btns = $('.btn-wrap .btn').hover(function (e) {
    $(this).next('.btn-arrow').css('border-top-color', btnColor[$btns.index(this)]);
}, function () {
    $(this).next('.btn-arrow').css('border-top-color', btnRollColor[$btns.index(this)]);
});

Demo: Fiddle

edited Feb 27, 2015 at 1:24

answered Feb 27, 2015 at 1:03

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Collectives™ on Stack Overflow

jQuery loop through .hover( ) function using .each( )

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related