jquery - 帮助使用 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 类，该类会覆盖第一个 CSS 类的设置。