Svelte 中的香草 JavaScript

Question

我一直在按照折叠边栏的指南进行操作。我意识到我不能使用 $ 因为它在 Svelte 中是保留的。有人可以指导我如何进行这项工作吗？谢谢:)

$(document).ready(function () {
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });
});

Answer 1

等效的 vanilla js 代码为：

const sidebarCollapse = document.getElementById('sidebarCollapse');
const sidebar = document.getElementById('sidebar');

sidebarCollapse.onclick = () => sidebar.classList.toggle('active');

Answer 2

你真的应该阅读 through/follow 和 Svelte tutorial，它可能会帮助你更好地理解如何克服这样的小挑战。

切换 class 就像切换变量并使用 Svelte 的 shorthand class directive

一样简单

<script>
    let active = false;
</script>

<button on:click={()=> active = !active}>
    Some menu text or an icon here
</button>

<aside class:active>
    I'm a sidebar
</aside>

然后您只需将样式设置为与您正在学习的任何教程相同，因为此时将有条件地应用活动 class。

这是一个简单的 REPL 示例。

Svelte 中的香草 JavaScript

Vanilla JavaScript in Svelte

javascript

svelte