在Svelte中如何基于同一元素的属性设置对应条件类名？

方案1：页面初始化后批量设置激活状态（无需改动模板写法，最省心） #

你完全不用纠结模板里怎么传this，直接写一段全局JS，页面加载或者路由切换的时候自动给匹配的链接加激活类就行：

// 页面加载/路由切换时执行
function setActiveNav() {
  // 先清空所有导航链接的激活状态
  document.querySelectorAll('.navBarLink').forEach(link => {
    link.classList.remove('activeLink')
    // 提取链接对应的页面名
    const linkPage = link.getAttribute('href').replace('#/', '').replace('#', '')
    if (linkPage === currentPageName) {
      link.classList.add('activeLink')
    }
  })
}

模板里直接写死基础类即可，不用加任何判断：

<div class="hidden md:flex items-center space-x-3">
  <a href="#Index" class="navBarLink">Farm</a>
  <a href="#/Leaderboard" class="navBarLink">LeaderBoard</a>
  <a href="#/WafBox" class="navBarLink">WafBox</a>
  <a href="#/Buy" class="navBarLink">Buy</a>
  <a href="#/Info" class="navBarLink">Info</a>
</div>

每次currentPageName变化的时候调用一次setActiveNav()就搞定了，代码比你设想的写法还要精简。

方案2：如果用模板引擎，直接循环渲染导航（从根源减少重复代码） #

你可以把导航配置存成数组，直接循环输出，连HTML重复的问题都一并解决：

// 导航配置，后续加导航只要改这个数组即可
const navList = [
  { href: '#Index', text: 'Farm' },
  { href: '#/Leaderboard', text: 'LeaderBoard' },
  { href: '#/WafBox', text: 'WafBox' },
  { href: '#/Buy', text: 'Buy' },
  { href: '#/Info', text: 'Info' },
]

模板里循环（以下为通用模板语法示例，可对应替换成你用的模板引擎语法）：

<div class="hidden md:flex items-center space-x-3">
  {each navList as item}
    <a href="{item.href}" class="navBarLink {currentPageName == item.href.replace('#/','').replace('#','') ? 'activeLink' : ''}">{item.text}</a>
  {/each}
</div>

方案3：坚持要用isActive函数传参的写法 #

如果你的模板支持传字符串参数，直接把href对应的页面名传进去即可，不需要传元素本身：

<div class="hidden md:flex items-center space-x-3">
  <a href="#Index" class="navBarLink {isActive('Index')}">Farm</a>
  <a href="#/Leaderboard" class="navBarLink {isActive('Leaderboard')}">LeaderBoard</a>
  <a href="#/WafBox" class="navBarLink {isActive('WafBox')}">WafBox</a>
  <a href="#/Buy" class="navBarLink {isActive('Buy')}">Buy</a>
  <a href="#/Info" class="navBarLink {isActive('Info')}">Info</a>
</div>

函数对应改写成：

function isActive(pageName) {
  return currentPageName === pageName ? 'activeLink' : ''
}

内容的提问来源于stack exchange，提问作者sidney