Question

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

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

实施例

<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

您需要使用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>

Answer 2

删除重复的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 3

不要对多个元素使用相同的ID。使用jQuery（假设是静态的，＆lt; ul＆gt; li-s是动态的）：

$('ul.ul-class').on('click','li.question',function() {
    var dataCounter = $(this).attr('data-counter');
    var newDataCounter = manipulate(dataCounter); // do whatever you want
    $(this).attr('data-counter', newDataCounter); // change it
}

使用Javascript

3 个答案: