javascript - 在单击 jquery 时向元素添加特定类

Question

我在使用简单的导航栏时遇到问题，该导航栏使用 jQuery 在某个页面处于事件状态时添加和删除特定的类。我想要一个类根据单击的 ID 附加到我的 aLink 类中。如果我点击 #aboutLink 我想要添加 .linkActive，但如果我点击 #sasLink 我想要 .link2Active 待添加。我看过的教程都添加了一个类，但由于我的两个类都不同，所以我需要根据单击的 ID 添加一个特定的类。

HTML:

<div id="mainNav">
    <ul id="nav">
        <a id="mainLogo" href="/"><li></li></a>
        <a id="aboutLink" class="aLink" href="/"><li></li></a>
        <a id="sasLink" class="aLink" href="/savings-and-support"><li></li></a>
        <a id="external" href="/"><li></li></a>
    </ul>
</div><!--/#mainNav-->

我知道我的 jQuery 没有意义，但这就是我能想到的。从逻辑上我明白了，但我迷失了语法。

jQuery:

$(function () {
    $(".aLink").click(function () {
        if ($(this) == $("#aboutLink")
            $(this).addClass('activeLink');
         else $(this).addClass('active2Link');
         });
     });

感谢您的任何意见或指导。

Answer 1

var idToClass = {
    'aboutLink' : 'linkActive',
    'sasLink' : 'link2Active'
}

$('#nav a').click(function(){
    e.preventDefault();
    $(this).addClass(idToClass[this.id]);
});

JS Fiddle demo .

您可以改为使用 toggleClass() 来允许通过第二次单击删除这些类:

var idToClass = {
    'aboutLink' : 'linkActive',
    'sasLink' : 'link2Active'
}

$('#nav a').click(function(e){
    e.preventDefault();
    $(this).toggleClass(idToClass[this.id]);
});

JS Fiddle demo .

编辑以回应OP中评论中的问题，如下:

How would I remove the class so that both links don't appear to be active at the same time?

有几种方法，但由于您添加不同的类名来表示“事件”状态，因此它们的效率有点低。第一种方法是使用暴力方法，有效地查找所有具有 class 属性的 a 元素，并将该属性设置为空字符串，并且 然后将 linkActive/link2Active 类名添加到单击的 a 元素中:

$('#nav a').click(function(e){
    e.preventDefault();
    var self = $(this);
    self.closest('ul').find('a[class]').attr('class', '');
    self.toggleClass(idToClass[this.id]);
});

JS Fiddle demo .

另一种方法是从 idToClass 对象中列出其 id 的元素中删除特定类。然而，这有点昂贵，因为它需要迭代对象，检索id，找到id和<的元素 em>然后删除类-名称:

$('#nav a').click(function(e){
    e.preventDefault();
    for (var id in idToClass) {
        if (idToClass.hasOwnProperty(id)){
            $('#' + id).removeClass(idToClass[id]);
        }
    }
    $(this).addClass(idToClass[this.id]);
});

JS Fiddle demo .

当然，如果您使用通用的类名，那么一切都会变得容易得多:

$('#nav a').click(function (e) {
    e.preventDefault();
    var self = $(this);
    self.closest('ul')
        .find('.commonActiveClassName')
        .removeClass('commonActiveClassName');
    self.addClass('commonActiveClassName');
});

JS Fiddle demo .

引用文献:

• addClass() .
• closest() .
• event.preventDefault() .
• find() .
• removeClass() .
• toggleClass() .