htmx - 如何向当前元素的相对位置的元素发送事件

Question

我有一个带有 class 的元素列表.node-display，当单击它时它变成一个输入。我想捕获向下或向上箭头键以单击.node-display列表中的下一个（相对于当前元素）。

在下面的示例中，按下应该单击项目 5，按下将单击项目 3。

• 1
• 2
• 3
• 4（当前选择）
• 5
• 6

我最好的猜测是这样的。

<input
   _="on keyup[key is 'ArrowDown'] send click to the first .node-display end"
>

有谁知道我实际上是如何写这个表达式的？

Answer 1

您可能希望将行为放在父级上，ul这样您就不必在每个输入上重复它。

像这样的东西：

<ul _="on keydown[key is 'ArrowDown'] from <input/> in me
           set nextSibling to it's parentElement's nextElementSibling
           if nextSibling
             set nextInput to the first <input/> in nextSibling
             call nextInput.focus()
             halt
           end
       on keydown[key is 'ArrowUp'] from <input/> in me
           set previousSibiling to it's parentElement's previousElementSibling
           if previousSibiling
             set previousInput to first <input/> in previousSibiling
             call previousInput.focus()
             halt
           end
       ">
  <li><input/></li>
  <li><input/></li>
  <li><input/></li>
  <li><input/></li>
</ul>

关于此代码的一些注释：

• 我from在事件处理程序中使用 from ，它将事件来自的元素放入it符号中
• 我正在使用keydown事件，因此我们可以使用halt命令取消事件，以避免向下和向上键更改插入符号的位置
• 我正在使用halt命令来阻止事件传播
• 我使用focus而不是点击作为概念证明