如何在_hyperscript js中使用变量

问题描述

我对 _hyperscript js 很感兴趣，我觉得它很有前途也很有趣。

现在我正在尝试了解简单命令中变量的使用。假设我有以下代码由 PHP 脚本生成，该脚本查询 dB 并在其中获取 id 的 dB（非常常见的情况）：

<div id="1000">Mercedes</div>
<div id="1022">Audi</div>
<div id="1301">Ferrari</div>
<div id="1106">Lamborghini</div>

要将类添加到特定的 id，我通常会这样做：

<button _="on click add .green to #1022" type="button">
    Click
</button>

但是如果我不知道 id，因为它是 dB 查询的结果怎么办？如何使用 _hyperscript 放置变量并使用 javascript 设置它？像这样：

<button _="on click call setID() then add .green to ???" type="button">
    Click
</button>

<script type="text/javascript">
    function setID() {
        // here the code to get the ID 
        return id;
    }
</script>

使用 'symbol' it 读取最后一个 call 的结果返回错误：

_="on click call setID() then add .green to it"

返回

Uncaught TypeError: target.classList is undefined

解决方法

您可以在查询文字中使用字符串模板，因此应该可以使用以下内容：

<button _="on click add .green to <#${getIdToAddTo()}/>" type="button">
    Click
</button>

其中 <.../> 是查询文字，${getIdToAddTo()} 是该查询中的字符串模板

另一种选择是创建一个返回要添加到的 div 的方法：

<script>
  function divToAddTo() {
    return document.getElementById("whatever");
  }
</script>
<button _="on click add .green to divToAddTo()" type="button">
    Click
</button>