javascript - 跟踪多个按钮以及每个按钮被点击的次数

Question

我的 html 中有多个可点击元素，并且想跟踪每个按钮被点击的次数。 我可以做一个非常不优雅的解决方案，其中包括为每个按钮提供一个特定的函数，例如函数button1()、函数button2()等...由onclick调用，但我确信有更好的方法来做到这一点。 感谢您的帮助。

<div class="starter">
        <h3>Starter</h3>
        <div class="starterItems">
            <button type="button" id="salmon" >Salmon Tartare with fresh diced tomatoes</button>
            <button type="button" id="prawn" >Prawn Cocktail with homemade marrinade</button>
            <button type="button" id="soup">Asparagus Soup served with croutons</button>
        </div>
</div>


var salmon = document.getElementById('salmon'), 
prawn = document.getElementById('prawn'),
soup = document.getElementById('soup'),
clicks = {}; 

function click(e){
var id = e.target.id; 
if(!clicks[id])
    clicks[id]=0;
clicks[id]++;
e.target.textContent = clicks[id];
}

salmon.addEventListener('click', click); 
prawn.addEventListener('click', click); 
soup.addEventListener('click', click); 

Answer 1

使用元素的 id 作为键:

var b1 = document.getElementById('b1'),
  b2 = document.getElementById('b2'),
  b3 = document.getElementById('b3'),
  clicks = {};

function click(e) {
  var id = e.target.id;
  if (!clicks[id])
    clicks[id] = 0;
  clicks[id]++;
  e.target.textContent = clicks[id];
}

b1.addEventListener('click', click);
b2.addEventListener('click', click);
b3.addEventListener('click', click);

<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>

<小时/>

使用data-属性:

var b1 = document.getElementById('b1'),
  b2 = document.getElementById('b2'),
  b3 = document.getElementById('b3');

function click(e) {
  if (!e.target.getAttribute('data-clicks'))
    e.target.setAttribute('data-clicks', 0);
  var clicks = parseInt(e.target.getAttribute('data-clicks'));
  e.target.setAttribute('data-clicks', clicks + 1);
  e.target.textContent = clicks + 1;
}

b1.addEventListener('click', click);
b2.addEventListener('click', click);
b3.addEventListener('click', click);

<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<button id="b3">Button 3</button>

<小时/>

而且，正如其他人提到的，使用 localStorage 也是一个有效的选项。实现类似于上面使用 id 作为键。