Javascript 禁用按钮并在行上显示沙漏（htmx）

我习惯于通过

这很好：

  <table>
    <tr id="offer_2">
     <td>Sun 27.12</td>
     <td>Spinach Lasagna</td>
     <td>5.00€</td>
     <td>1</td>
     <td>
      <button id="2" hx-post="/offer/2/add_offer_to_order" 
         hx-target="#offer_2" hx-swap="outerHTML">+</button>
      <button id="2" hx-post="/offer/2/delete_offer_from_order" 
         hx-target="#offer_2" hx-swap="outerHTML">-</button>
     </td> 
    </tr> 
   </table>

星期日27.12
菠菜千层面
5.00€
1.
+
-

。。。。用户按下

+

或

-

按钮后，相应的行将从服务器更新为新版本

我想给用户一些视觉反馈：

• 在ajax调用期间，应该禁用这些按钮
• 更新的行上方应该有一个沙漏

---

您可以使用hx指示器属性来完成以下操作：

这将在htmx请求运行时将类“htmx请求”添加到指定元素

因此，您可能会这样做（利用htmx中的“最接近”语法）：

---

请注意，我只是使用红色背景作为示例，以获得戏剧性效果。您当然需要一些不同的样式。

根据hx indicator的文档，“此属性的值是应用该类的元素的CSS查询选择器。”。我认为这些文档需要一个超链接，链接到“css查询选择器”在htmx中能够做的伟大事情的文档。

最近的tr

对我不起作用，但是

\offer\u 2

did。顺便说一句，我在这里找到了更多有用的例子：抱歉！我以为我已经为

hx指示器

实现了

最接近的

语法！它将在下一个版本（htmx 1.1.0）中发布

<td hx-indicator="closest tr">
    <button id="2" hx-post="/offer/2/add_offer_to_order" 
        -target="#offer_2" hx-swap="outerHTML">+</button>
    <button id="2" hx-post="/offer/2/delete_offer_from_order" 
        hx-target="#offer_2" hx-swap="outerHTML">-</button>
</td>

tr.htmx-request {
    transition: all 500ms ease-in;
    background-color:red; // for example
}