Svelte中on:click为HTML元素添加类的问题（内联写法失效）

你的代码无法工作是因为Svelte内联事件处理里的this并不会指向当前DOM元素，下面提供几种可行的解决方式：

方法一：通过事件对象操作元素 #

直接利用事件参数的currentTarget属性获取当前点击的元素，再添加类：

<li on:click={(e) => e.currentTarget.classList.add('active')}>First</li>

方法二：绑定DOM元素到变量（更易复用） #

如果后续需要多次操作该元素，可以先把元素绑定到组件变量：

<script>
  let listItem;
</script>

<li bind:this={listItem} on:click={() => listItem.classList.add('active')}>First</li>

方法三：用Svelte响应式类绑定（推荐） #

Svelte更推荐通过响应式变量控制类名，无需手动操作DOM，更符合框架逻辑：

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

<li on:click={() => isActive = true} class:active={isActive}>First</li>

这种方式会自动根据isActive的值为元素添加或移除active类。

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