Using a variable with jQuery addClass

Question

Trying to mix a variable with :not then use that variable with addClass. but no luck yet.

HTML

<ul>
  <li><a href="#">Nav One</a></li>
  <li><a href="#">Nav Two</a></li>
  <li><a href="#">Nav Three</a></li>
  <li><a href="#">Nav Four</a></li>
</ul>

LESS

ul{
    li{
        a{
            color: black;
            transition: all 0.5s ease;
            font-size: 3rem;
            text-decoration: none;
        }
    }
}
.enc-non-active{
    color: gray;
}

JAVASCRIPT

myFunction('ul li a', 'enc-active', 'enc-non-active');

function myFunction($menu, $activeClass, $nonActiveClass) {
   $(function(){
        $($menu).hover(function(){
            $(this).addClass($activeClass);
        },
        function(){
            $(this).removeClass($activeClass);
        });
        $($menu).hover(function(){
            var fullPath = $menu + ':not(' + $activeClass + ')';
            $(fullPath).addClass($nonActiveClass);
        },
        function(){
            var fullPath = $menu + ':not(' + $activeClass + ')';
            $(fullPath).removeClass($nonActiveClass);
        });
    });
}

Here is the CodePen http://codepen.io/antfuentes87/pen/pJEaeb if anyone can let me know what I am doing wrong, that would be great. Thanks for your time.

Whatever the person wanted using the function. For example I would call it like this myFunction('ul li a', 'enc-active', 'enc-non-active'). Did you look at the codepen? — antfuentes87
– antfuentes87, Commented May 22, 2015 at 1:30
What function? Please post the code here, not just at CodePen. — Barmar
– Barmar, Commented May 22, 2015 at 1:30
There's no need to use CodePen at all, now that SO has Stack Snippets. — Barmar
– Barmar, Commented May 22, 2015 at 1:31
Alright, I will check into the Stack Snippets. For now I just put the code in the post. — antfuentes87
– antfuentes87, Commented May 22, 2015 at 1:34

yangli-io · Accepted Answer · 2015-05-22 01:29:54Z

2

You forgot a dot in :not(. - easily fixed http://codepen.io/anon/pen/zGKRyW

var fullPath = $menu + ':not(.' + $activeClass + ')';
$(fullPath).addClass($nonActiveClass);

answered May 22, 2015 at 1:29

yangli-io

17.4k8 gold badges43 silver badges50 bronze badges

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

Comments

charlietfl · Accepted Answer · 2015-05-22 01:30:19Z

1

You are missing a dot to make the class name into a css selector

Change

var fullPath = $menu + ':not(' + $activeClass + ')';

To

var fullPath = $menu + ':not(.' + $activeClass + ')';

DEMO

answered May 22, 2015 at 1:30

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Using a variable with jQuery addClass

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related