跟踪多个按钮以及每个按钮被单击的数量
Keeping track of multiple buttons and how many each have been clicked
我的html中有多个可点击的元素，并希望跟踪每个按钮被点击的次数。我可以做一个非常不优雅的解决方案，其中包括为每个按钮提供一个特定的功能，例如函数按钮 1（）、函数按钮 2（） 等......由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);
使用元素的 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 作为上面的键。
优雅的解决方案是根据您的需要使用localStorage or sessionStorage。
var count = 0;
function yourFunction(e) {
count= parseInt(count) + parseInt(1);
localStorage['button1'] = count; OR
localStorage[e.target.id] = count; OR
}
您肯定可以通过获取id of the button而不是"button1"来改进代码，在localStorage中设置它并在下次获取它将是更简单的方法。事实上，如果您愿意，您也可以在localStorage中保留一个对象。
这实际上取决于您现有的代码库。一种简单的方法是为要跟踪的所有按钮（例如类）设置一个标识符。然后，您只需为该特定类绑定和事件即可。就这么简单。
举个例子，对于每个按钮（或任何其他元素，这并不重要），我们将选择以下属性作为我们的标识符：data-count-clicks .为了给它们一个标识，上述标识符也将具有可选值。例如，我们将有这样的东西 data-count-clicks="salmon" 或 data-count-clicks="prawn" .
这适用于动态生成的元素（不要忘记检查控制台日志）：
(function() {
var counter = {};
document.addEventListener('click', onClickFn);
function onClickFn(event) {
var el = event.target;
while (el) {
if (matches(el, '[data-count-clicks]')) {
var elemName = el.getAttribute('data-count-clicks') || 'nameless';
if (typeof counter[elemName] === 'number') {
counter[elemName] += 1;
} else {
counter[elemName] = 1;
}
console.log(counter);
}
el = el.parentElement;
}
}
// Polyfill for element.matches
// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
function matches(elm, selector) {
var matches = (elm.document || elm.ownerDocument).querySelectorAll(selector),
i = matches.length;
while (--i >= 0 && matches.item(i) !== elm);
return i > -1;
}
})();<body>
<button data-count-clicks="salmon">salmon</button>
<button data-count-clicks="prawn">prawn</button>
<button data-count-clicks="soup">soup</button>
<button data-count-clicks>no name</button>
<button data-count-clicks>no name</button>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quisquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nostrum repellendus consectetur, doloribus eaque nobis rerum minima aut porro ducimus possimus eligendi <strong data-count-clicks="strong-tag">you can also click me</strong> expedita corrupti,
ut vero atque ratione fugiat itaque, voluptatum. Quidem, ullam.</p>
<p data-count-clicks="nested--parent"><strong data-count-clicks="nested--child">nested clicks</strong>
</p>
</div>
</body>一个更简单的解决方案，不适用于动态生成的元素（不要忘记检查控制台日志）：
(function() {
var counter = {};
var clickElements = document.querySelectorAll('[data-count-clicks]');
for (var i = 0; i < clickElements.length; i++) {
clickElements[i].addEventListener('click', onClickFn);
}
function onClickFn() {
var elemName = this.getAttribute('data-count-clicks') || 'nameless';
if (typeof counter[elemName] === 'number') {
counter[elemName] += 1;
} else {
counter[elemName] = 1;
}
console.log(counter);
}
})();<body>
<button data-count-clicks="salmon">salmon</button>
<button data-count-clicks="prawn">prawn</button>
<button data-count-clicks="soup">soup</button>
<button data-count-clicks>no name</button>
<button data-count-clicks>no name</button>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quisquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nostrum repellendus consectetur, doloribus eaque nobis rerum minima aut porro ducimus possimus eligendi <strong data-count-clicks="strong-tag">you can also click me</strong> expedita corrupti,
ut vero atque ratione fugiat itaque, voluptatum. Quidem, ullam.</p>
<p data-count-clicks="nested--parent"><strong data-count-clicks="nested--child">nested clicks</strong>
</p>
</div>
</body>为每个按钮分配相同的 css 类，并为所有按钮分配相同的功能。（请注意，你需要jQuery。
$(".myClass").on("click", function(event){
var clickedButtonId = event.target.id;
// here you have id of the button that is clicked, and you can do whatever you want with that id
});
该函数仅定义一次，它为您的所有按钮提供服务。
你可以在
jQuery中做一些事情，比如
.js：
$('.button').on('click', function(){
$(this).attr('data-counter', parseInt($(this).attr('data-counter') + 1) );
});
.html：
<button class="button" data-counter="0"></button>
这样做，您将分别拥有数据计数器中的每个计数器。
为每个按钮创建一个对象和一个计数器，例如：
var buttonClicks = {};
在每次按钮单击的处理程序中，调用一个函数，该函数会为您更新此对象。
例如function incrementButtonCounter(buttonId) {
if (typeof buttonClicks[buttonId] === 'undefined') {
buttonClicks[buttonId] = 1;
return;
}
buttonClicks[buttonId]++;
}
确保incrementButtonCounter函数可以看到buttonClicks对象，即它们必须位于同一命名空间中 - 最好不是全局命名空间。
我会创建一个对象，其中包含每个bata的计数数据。
var count = {
'btn1': 0,
'btn2': 0,
'btn3': 0
}
并在单击按钮时递增字段。
function handle(item) {
var clickedBtnId = item.target.getAttribute('id');
count[clickedBtnId]++;
update();
}
function update() {
document.getElementById('result').innerHTML = 'Btn 1 ' + count.btn1 + ' clicks <br/>' +
'Btn 2 ' + count.btn2 + ' clicks <br/> ' +
'Btn 3 ' + count.btn3 + ' clicks';
}
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
btn1.onclick = handle;
btn2.onclick = handle;
btn3.onclick = handle;
jsFiddle 上的工作示例
你可以
这样做：
var buttons = {};
function handleBtnClick(btnName) {
buttons[btnName] = (buttons[btnName] || 0) + 1;
}<button onclick="handleBtnClick('muFirstButton')">my button 1</button>
<button onclick="handleBtnClick('muSecondButton')">my button 2</button>相关文章：
- 如何隐藏按钮单击事件上的占位符
- 从Web服务器下载图像按钮单击使用JavaScript
- 在SweetAlert中传递ASP.NET按钮单击事件
- 单选按钮单击可刷新/更改网站的小区域
- 调用按钮单击事件 ajax 加载的用户控件
- 附加 jQuery 代码以在加载和按钮单击时运行
- 在按钮单击时将图像URL数据显示到弹出框中，而无需禁用背景
- 按钮单击服务器单击
- 触发单选按钮单击，并在页面刷新时记住选择
- 如何使用 javascript 而不是使用控制器中的方法在 rails 中呈现部分按钮单击
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 如何在 Angular JS 中的按钮单击上添加类
- 当元素上有多个类时触发按钮单击事件
- 如何在 HTML 中的按钮单击上更改图像(IMG URL 每次来自服务器）
- 如何使用javascript刷新我的html页面时清除按钮单击
- 阻止后退按钮 - 单击按钮时忽略
- 如何制作按钮.单击“开始时不运行”
- Rails:尝试在按钮单击时渲染部分
- 在页面加载时调用函数，在按钮单击时再次调用函数，但参数不同
- 如何在服务器端的文本中添加按钮单击事件
