如何使用内联 onclick 将 pug mixin 的 id 获取到 javascript 函数中

Question

我正在尝试制作一个 mixin，其中可以添加具有不同元素 ID 的多个计数器。我已经尝试了很多事情，我得到的最接近工作的例子是这个。


mixin counter(count, id)
  h2(id=id)= count
  button(onclick="addId(1, this.textContent)")= id
  button(onclick ="addId(-1, this.textContent)")= id
  script.
    function addId(x,y){
      let element = document.getElementById(y);
      let content = element.textContent;
      element.textContent = Number(content) + x;
    }

然后我使用

添加 mixins

+counter(0, 'idToAdd')

这可行，但问题是按钮值必须是传入的 id 值。我希望一个按钮是添加，另一个按钮是减去。但是我尝试过的一切都失败了。仅通过使用

this.textContent

我可以在按钮上传递 id，然后它就可以工作了。所以我想做的是在不使用 this.textContent 的情况下将显示元素的 ID 传递到内联 onclick 中，这样我就可以适当地命名按钮。

我试过了

#{id}

和

!{id}

甚至

`${id}`

但似乎没有任何效果。

请帮忙。

谢谢

Answer 1

与其为每个计数器创建一个新函数，不如创建一个适用于所有计数器的函数。可以直接在onclick属性中使用模板字符串插值将具体的ID设置为函数调用的参数：

mixin counter(count, id)
  h2(id= id) #{count}
  button(onclick=`updateCounter(1, '${id}')`) Add 1
  button(onclick=`updateCounter(-1, '${id}')`) Subtract 1

+counter(0, 'foo')
+counter(0, 'bar')

script.
  function updateCounter(by, id) {
    let element = document.getElementById(id);
    let currentCount = parseInt(element.textContent, 10);
    element.textContent = currentCount + by;
  }

编译为：

<h2 id="foo">0</h2>
<button onclick="updateCounter(1, 'foo')">Add 1</button>
<button onclick="updateCounter(-1, 'foo')">Subtract 1</button>
<h2 id="bar">0</h2>
<button onclick="updateCounter(1, 'bar')">Add 1</button>
<button onclick="updateCounter(-1, 'bar')">Subtract 1</button>
<script>
  function updateCounter(by, id) {
    let element = document.getElementById(id);
    let currentCount = parseInt(element.textContent, 10);
    element.textContent = currentCount + by;
  }
</script>

如何使用内联 onclick 将 pug mixin 的 id 获取到 javascript 函数中

How to get id of pug mixin into a javascript function with inline onclick

javascript

templates

onclick

pug

mixins