javascript - 使用Javascript动态获取和设置li标签onClick的自定义属性

我是JavaScript新手，我有以下要求。

我需要获取li标签的自定义属性（数据计数器），进行一定的处理，然后使用JavaScript在特定li标签的每次点击上使用一些值动态地将其设置回（data-counter）。

例

<li id="myInput" class="question" data-counter="0" data-value="5" onclick="capture(this);">A</li>
<li id="myInput" class="question" data-counter="0" data-value="4" onclick="capture(this);">B</li>
<li id="myInput" class="question" data-counter="0" data-value="1" onclick="capture(this);">C</li>

我的Bli标签的onclick。它应该如下图所示

<li id="myInput" class="question" data-counter="0" data-value="5" onclick="capture(this);">A</li>
<li id="myInput" class="question" data-counter="1" data-value="4" onclick="capture(this);">B</li>
<li id="myInput" class="question" data-counter="0" data-value="1" onclick="capture(this);">C</li>

我的B li标签的数据计数器值已单独更改为值“ 1”。

如何使用JavaScript完成此操作？我已经尝试了很多在线解决方案，但是没有一个对我有用。

请为我提供可能的解决方案。

先感谢您

最佳答案

删除重复的ID。每个元素的ID必须唯一。 https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/id

在传递单击的元素的引用时，您可以使用dataset更新计数器。

function capture(e){
  e.dataset.counter++;
  console.log(e.dataset.counter);
}

<li  class="question" data-counter="0" data-value="5" onclick="capture(this);">A</li>
<li  class="question" data-counter="0" data-value="4" onclick="capture(this);">B</li>
<li  class="question" data-counter="0" data-value="1" onclick="capture(this);">C</li>

您可以从MDN https://developer.mozilla.org/en/docs/Web/API/HTMLElement/dataset了解有关dataset的更多信息