Quiero establecer una clase condicional basada en un atributo del mismo elemento para poder permanecer seco. Al principio obtuve esto:
<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>Ahora me gustaría esto:
<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> Entonces simplemente tendría que verificar el atributo de href en mi función isActive . Pero aquí this no parece tener la información correcta dentro. Hay una manera de hacerlo ? Limpiaría mucho mi código.
Editar: isActive() se vería así:
<script> function isActive(element) { return 'Active' if (currentPageName == element.attr('href')) } </script>Un problema con su enfoque es que tanto en
<a href="#/Leaderboard" class="navBarLink {isActive(this)}">LeaderBoard</a>y la respuesta propuesta usando la class:directive
<a href="#Index" class:active-link={isActive('Index')}>Index</a> es que la función solo se ejecutará una vez , en el primer procesamiento y luego nunca se volverá a ejecutar, ni siquiera cuando currentPageName .
La solución directa más obvia sería simplemente deshacerse de la llamada de función y usar la clase: directiva de esta manera:
<a href="#Index" class:active-link={currentPageName == 'Index'}>Index</a>esto asegurará que las clases cambien a medida que cambia currentPageName.
Al declarar la función con la sintaxis de flecha y hacerla reactiva agregando $: parece que, alternativamente al uso de la class:directive (que verifica si el valor es verdadero/falso), el nombre de la clase podría establecerse directamente dentro del atributo class="" como bien
UN REEMPLAZO
<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>