带有 JS 的点击计数器：多个按钮的点击次数、时间和 button_id答案

【问题标题】：Click Counter with JS: number of clicks, time and button_id for multiple buttons带有 JS 的点击计数器：多个按钮的点击次数、时间和 button_id
【发布时间】：2021-06-25 06:12:58
【问题描述】：

我有多个按钮，输出应该包含时间、button_id 和每个按钮的点击次数（见下文）。但是，我找不到为每个按钮实现工作 click_counter 的方法。

非常感谢，

<button type="button" id="button_1" >click 1</button>
<button type="button" id="button_2" >click 2</button>
<button type="button" id="button_3" >click 3</button>
<button type="button" id="button_4" >click 4</button>

<script>

    let count_time = {};

    $('button').click(function (d) {
        d.click_counter = (d.click_counter || 0) + 1;
        let click_time = Date.now();
        count_time[d.target.id] = {
            button_id: d.target.id,
            click_time: click_time,
            click_count: d.click_counter,
        }
        liveSend(count_time[d.target.id])})

</script>

输出：

{'button_id': 'button_1', 'click_time': 1624600982871, 'click_count': 1}
{'button_id': 'button_1', 'click_time': 1624600983578, 'click_count': 1}
{'button_id': 'button_2', 'click_time': 1624600984171, 'click_count': 1}
{'button_id': 'button_3', 'click_time': 1624600984683, 'click_count': 1}

【问题讨论】：

标签： javascript jquery click

【解决方案1】：

将您的 click_counter 存储在您可以读取和写入每次迭代的数据属性中。它将是一个字符串，因此您每次都需要转换为数字。

let count_time = {};

$('button').click(function(d) {
  d.target.dataset.click_counter = (+d.target.dataset.click_counter || 0) + 1; 
  // note the shorthand number conversion by prepending with +
  let click_time = Date.now();
  count_time[d.target.id] = {
    button_id: d.target.id,
    click_time: click_time,
    click_count: d.target.dataset.click_counter,
  }
  console.log(count_time)
 //  liveSend(count_time[d.target.id])
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" data-click_counter id="button_1">click 1</button>
<button type="button" data-click_counter id="button_2">click 2</button>
<button type="button" data-click_counter id="button_3">click 3</button>
<button type="button" data-click_counter id="button_4">click 4</button>

【讨论】：