帮助使用 jQuery 添加类答案

【问题标题】：help with adding Classes with jQuery帮助使用 jQuery 添加类
【发布时间】：2011-09-21 01:45:30
【问题描述】：

我正在尝试根据悬停的链接更改导航底部边框颜色，底部边框颜色应更改以匹配悬停链接的颜色，当链接失去焦点或悬停时，导航底部边框应该会恢复到原来的颜色，下面是我的 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);
        });

【问题讨论】：

标签： jquery html css dom-manipulation

【解决方案1】：

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

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

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案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/

【讨论】：

【解决方案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') );
        }
);

【讨论】：