简化根据 URL (DRY) 添加“活动”类的 Javascript答案

【问题标题】：Simplifying Javascript which adds an "active" class according to URL (DRY)简化根据 URL (DRY) 添加“活动”类的 Javascript
【发布时间】：2020-05-28 13:35:12
【问题描述】：

我通常在后端使用 Python 编写代码，对 JS 并不熟悉。这段代码对我来说看起来很讨厌，因为它重复了很多次。如果我用 Python 编写，我想我会创建一个对象列表，然后循环遍历对象列表以添加活动类（如果其中一个对象与 URL 匹配）。

我可以用 JS 做到这一点吗？或者有什么好的方法可以从正常写前端的人那里优化？

JS：

var url = window.location.pathname;

var overview = document.getElementById("overview");
var cats = document.getElementById("categories");
var videos = document.getElementById("videos");
var tests = document.getElementById("tests");
var memos = document.getElementById("memos");

var overviewBtm = document.getElementById("overview-btm");
var videosBtm = document.getElementById("videos-btm");
var testsBtm = document.getElementById("tests-btm");
var memosBtm = document.getElementById("memos-btm");
var profileBtm = document.getElementById("profile-btm");

var superUsersBtm = document.getElementById("super-users-btm");
var superResultsBtm = document.getElementById("super-results-btm");
var superNewBtm = document.getElementById("super-new-btm");
var superInviteBtm = document.getElementById("super-invite-btm");
var superProfileBtm = document.getElementById("super-profile-btm");

if (url == '/overview/'){
    console.log(url);
    if (overview){
    overview.classList.add('nav-active');
    } else if (overviewBtm){
    overviewBtm.classList.add('nav-active');
    }
} else if (url == '/categories/'){
    console.log(url);
    if (cats){
    cats.classList.add('nav-active');
    }
} else if (url == '/videos/'){
    console.log(url);
    if (videos){
    videos.classList.add('nav-active');
    } else if (videosBtm){
    videosBtm.classList.add('nav-active');
    }
} else if (url == '/tests/'){
    console.log(url);
    if (tests){
    tests.classList.add('nav-active');
    } else if(testsBtm){
    testsBtm.classList.add('nav-active');
    }
} else if (url == '/memos/'){
    console.log(url);
    if (memos){
    memos.classList.add('nav-active');
    } else if (memosBtm){
    memosBtm.classList.add('nav-active');
    }
} else if (url == '/profile/'){
    console.log(url);
    if (profileBtm){
    profileBtm.classList.add('nav-active');
    } else if (superProfileBtm){
    superProfileBtm.classList.add('nav-active');
    }
} else if (url == '/tests/results/'){
    console.log(url);
    if (superResultsBtm){
    superResultsBtm.classList.add('nav-active');
    }
} else if (url == '/accounts/'){
    console.log(url);
    if (superUsersBtm){
    superUsersBtm.classList.add('nav-active');
    }
} else if (url == '/invite/'){
    console.log(url);
    if (superInviteBtm){
    superInviteBtm.classList.add('nav-active');
    }
} else if (url == null){
    // pass
}

编辑： base.html 中的 HTML 片段：

<div class="header-icon-container d-xs-none">
    <a class="nav-item nav-link d-xs-none" href="{% url 'overview' %}" id="
        <i class="fas fa-home fa-2x"></i>
        <span>Home</span>
    </a>
</div>
<div class="header-icon-container">
    <a class="nav-item nav-link" href="#" id="drills">
        <i class="fas fa-dumbbell fa-2x"></i>
        <span>Drills</span>
    </a>
</div>
<div class="header-icon-container d-xs-none">
    <a class="nav-item nav-link" href="{% url 'tests' %}" id="tests">
        <i class="fas fa-graduation-cap fa-2x"></i>
        <span>Testing</span>
    </a>
</div>
<div class="header-icon-container">
    <a class="nav-item nav-link" href="{% url 'videos' %}" id="videos">
        <i class="fas fa-video fa-2x"></i>
        <span>Videos</span>
    </a>
</div>
<div class="header-icon-container">
    <a class="nav-item nav-link" href="{% url 'memos' %}" id="memos">
        <i class="fas fa-paper-plane fa-2x"></i>
        <span>Memos</span>
    </a>
</div>

【问题讨论】：

假设这是关于在导航中突出显示当前页面，可能有一种方法可以简单地将<a> 的href 与当前 URL 进行比较，但我们必须查看相关的为此的 HTML。为什么 Django 不在后端这样做？
之所以这样写是因为我有一个包含导航的base.html。虽然我可以在扩展base.html 页面的每个页面上都有一个新的导航栏，但在base.html 中简单地创建一个导航然后使用JS 向它添加一个活动类似乎更合乎逻辑。我在这里可能错了。总是对建议持开放态度。我将使用 HTML 更新帖子。
else if 语句是什么？那些在那里是因为当#overview 在页面上时#overview-btm 不在，反之亦然？
是的，这段代码写得很快，我把if 或else 语句扔到需要检查项目是否存在的地方，而不是挖掘代码以确保每个项目都存在场景（试图避免不必要的错误追踪）。
Fwiw 我找到了一种更好的方法来使用 Django 后端处理这个问题（由 Chris G. 建议）here 但我仍然想知道这个优化版本会是什么样子或者有多前沿-end devs 会处理这个问题。

标签： javascript html django

【解决方案1】：

嗯，我不确定这些overview-btm、super-profile-btm 是什么。但是对于链接，很简单：

const links = document.querySelectorAll('.nav-item.nav-link');
links.forEach((link) => {
    if (link.pathname === window.location.pathname) {
        link.classList.add('nav-active');
    }
})

【讨论】：

它们用于不同的（移动/主管/页脚）菜单，可以忽略。这是我一直在寻找的类型。谢谢！