如何在_hyperscript js中使用变量

Question

我很享受_hyperscript js的乐趣，我发现它很有前途，也很有趣。

现在，我试图理解在简单命令中变量的用法。假设我有一个查询dB的PHP脚本生成的以下代码，其中的ids是从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

Answer 1

您可以在查询字面值中使用字符串模板，因此应该可以使用下面这样的代码：

<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>