获取和设置li tag的自定义属性，使用Javascript动态点击

Question

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

我需要获取我的 li 标签的自定义属性(数据计数器(，进行某些操作，然后在每次使用 javascript 动态单击特定li 标签时将其(数据计数器(设置回一些值。

例

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

点击我的 B li 标签。它应该如下所示

<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 完成此操作？我已经在网上尝试了很多解决方案，但没有一个对我有用。

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

提前谢谢你

Answer 1

删除重复的 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的更多信息

Answer 2

您需要使用attr获取当前data-counter并继续递增它，然后使用attr()再次设置它：

function capture(element) {
$(element).attr('data-counter', parseInt($(element).attr('data-counter')) + 1);
console.log('New data-counter value is: ' + $(element).attr('data-counter'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>