如何在 javascript 中动态单击按钮时增加值？

Question

当我单击“喜欢”按钮时，增量值会增加，但它不会随着按钮的增加而相应地工作。会怎么做？

索引.html

<div class="row">

    <div class="col-md-4">

         <i class="fa fa-thumbs-up" onclick="count(this, '{{datas.id}}', '{{datas.user_id}}')" id="odd">

          </i>

          <span id="add"></span>

    </div>  

    <div class="col-md-4"></div>

    <div class="col-md-4 text-right">{{datas.post_date}}</div>

</div>

收件箱.js

var counter=0;

function count(id, data, out)

{   

    counter++;

    var one = id.closest('.card-body');

    one.querySelector('#add').innerHTML = counter;    

}

像按钮递增但不是从 1 开始它从前一个数字开始

Answer 1

你不能依赖全局计数器。您需要有每个项目的特定计数器。您可以采用的一种方法是在节点本身上添加数据属性并在每次单击时更新，例如：function count(id, data, out) {&nbsp; const counter = parseInt(this.getAttribute("data-counter") || 0) + 1; // read current counter&nbsp; this.setAttribute("data-counter", counter); // update counter&nbsp; var one = id.closest('.card-body');&nbsp; one.querySelector('#add').innerHTML = counter;}<div class="row">&nbsp; <div class="col-md-4">&nbsp; &nbsp; <i class="fa fa-thumbs-up" data-counter="0" onclick="count(this, '{{datas.id}}', '{{datas.user_id}}')" id="odd"></i>&nbsp; &nbsp; <span id="add"></span>&nbsp; </div>&nbsp; <div class="col-md-4"></div>&nbsp; <div class="col-md-4 text-right">{{datas.post_date}}</div></div>