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

Question

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

我需要获取li标签的自定义属性（数据计数器），进行一定的处理，然后在每次使用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> 

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

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

先感谢您

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>