CODEWITHSUNDEEP
jqueryhtmlcssdom-manipulation
Udders
Udders

Reputation: 6986

help with adding Classes with jQuery

I am trying to change my navigation bottom border color based on what link is hovered over, the bottom border color should change to match that of the hovered link, when when the link loses focus or hover, then the navigation bottom-border should return to it's original color, below is my HTML and jQuery.

<nav>
            <ul class="<?php echo $ul; ?>">
                <li class="home"><a class="home" href="/">Home</a></li>
                <li class="letters"><a class="letters" href="/product/type/letters">Letters</a></li>
                <li class="business active"><a class="active business" href="/product/type/business">Business</a></li>
                <li class="cards"><a class="cards" href="/product/type/cards">Cards</a></li>
                <li class="gifts"><a class="gifts"href="/product/gifts">Gifts</a></li>
            </ul>
        </nav>

/jQuery/

$('nav li a').hover(function(){
            var orginalClass = $(this).parent().parent().attr('class');
            $(this).parent().parent().attr('class', '');
            var classType = $(this).attr('class');
            $(this).parent().parent().addClass(classType);
        }, 
        function() {
            $(this).parent().parent().attr('class', '');
            $(this).addClass(orginalClass);
        });

Upvotes: 1

Views: 68

Answers (4)

aziz punjani
aziz punjani

Reputation: 25776

$('nav li a').hover(function(){
            var ul = $(this).closest('ul');                                              
            ul.data('originalClass', ul.attr('class') );             
            ul.removeClass( ul.data('originalClass') );             
            ul.addClass( $(this).attr('class') );
        }, 
        function() {
            var ul = $(this).closest('ul'); 
            ul.removeClass( $(this).attr('class') ); 
            ul.addClass( ul.data('originalClass') );
        }
);

Upvotes: 0

Simon Arnold
Simon Arnold

Reputation: 16177

var orginalClass='';   
$('nav li a').hover(function(){
    var ul = $(this).closest('ul');
    orginalClass = ul.attr('class');
    var classType = $(this).attr('class');
    ul.removeClass().addClass(classType);
}, 
function() {
    ul.removeClass().addClass(orginalClass);
});

Upvotes: 0

JaredPar
JaredPar

Reputation: 755141

Try the following 

$('nav li a').each(function() {
  var savedClass = $(this).parents('nav').first().attr('class');
  $(this).hover(function() {
    $(this).parents('nav').first().attr('class', $(this).attr('class'));
  }, function() {
    $(this).parents('nav').first().attr('class', savedClass);
  });
});

Fiddle: http://jsfiddle.net/9J7RS/

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

The problem is the scope of your "originalClass" variable. It is in the local scope of the first hover function, so it is inaccessible in the second.

What you should be doing is simply adding and removing a second CSS class that overwrites the settings of the first.

Upvotes: 3

Related Questions