帮助使用 jQuery 添加类

Question

我正在尝试根据悬停在哪个链接上更改导航底部边​​框颜色，底部边框颜色应更改以匹配悬停链接的颜色，当链接失去焦点或悬停时，导航底部边​​框应返回到它是原始颜色，下面是我的 HTML 和 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);
        });

Answer 1

问题是“originalClass”变量的范围。它位于第一个悬停函数的本地范围内，因此在第二个悬停函数中无法访问它。

您应该做的只是添加和删除第二个 CSS 类，该类会覆盖第一个的设置。

Answer 2

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

Answer 3

尝试以下

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

小提琴： http://jsfiddle.net/9J7RS/

Answer 4

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