请求进行时，HTMX隐藏文本并显示加载微调器

Question

我使用的是HTMX，我在表单中有一个按钮，上面写着"发送"，当表单提交时，它旁边会出现一个加载微调器。我希望"发送"消失，在请求进行时只显示加载微调器。我该怎么做？

<form hx-post="/test">
<button type="submit">
<span>Send</span>
<svg class="htmx-indicator ml-2 animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="black" fill="transparent" stroke-width="4"></circle>
<path class="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</button>
</div>
</form>

Answer 1

应该将.htmlx请求类添加到触发请求的按钮中，这样您就可以将其与一些CSS一起使用来隐藏文本。

https://htmx.org/docs/#request-操作