如何根据 Svelte 中同一元素的另一个属性设置 class 名称？

Question

我想根据同一元素的属性设置一个条件class，这样我就可以保持干燥。起初我得到这个：

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

现在我想要这样：

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

然后我只需要在我的函数 isActive 中检查 href 的属性。但是这里this里面好像没有正确的信息。有办法吗？它会清理我的代码很多

编辑：isActive() 看起来像这样：

<script>
  function isActive(element) {
    return 'Active' if (currentPageName == element.attr('href'))
  }
</script>

Answer 1

当使用箭头语法声明函数并通过添加 $: 使其响应时，看起来可以替代使用 class:directive（检查值是否为 truthy/falsy）类名也可以直接在 class="" 属性中设置

一个REPL

<script>
    let currentPageName = 'Index'

    $: isActive = (linkText) => {
        if (linkText === currentPageName) return 'active-link'
        // else if (...) return 'other-class-name' // possible class name switch
        else return ''
    }  
</script>

  <div class="">
    <a href="#Index" class="{isActive('Index')}">Index</a>   
  </div>
  <div class="">
    <a href="#Leaderboard" class="{isActive('Leaderboard')}">Leaderboard</a>   
  </div>

<br>
<button on:click={() => currentPageName = 'Leaderboard'}>change currentPageName</button>

<style>
    .active-link {
        color: purple;
    }
</style>

Answer 2

您的方法的一个问题是

<a href="#/Leaderboard" class="navBarLink {isActive(this)}">LeaderBoard</a>

和建议的答案使用 class:directive

 <a href="#Index" class:active-link={isActive('Index')}>Index</a>

是该函数只会运行一次，在第一次渲染时，然后永远不会重新执行，即使 currentPageName 发生变化。

最明显、最直接的解决方案是简单地放弃函数调用并像这样使用 class:directive：

<a href="#Index" class:active-link={currentPageName == 'Index'}>Index</a>

这将确保类随着 currentPageName 的变化而变化。

如何根据 Svelte 中同一元素的另一个属性设置 class 名称？

How to set a class name dependant on another attribute of the same element in Svelte?

html

javascript

css

svelte