我试图在按钮上显示用户点击该按钮的次数。我想在不为每个按钮编写单独的功能的情况下执行此操作,因为我计划有很多按钮。
<button class="itemButton"> Button A <span class="itemCount"> 0 </span> </button>
<button class="itemButton"> Button B <span class="itemCount"> 0 </span> </button>
<button class="itemButton"> Button C <span class="itemCount"> 0 </span> </button>
我的方法是尝试通过按钮上的 itemCount 类访问跨度,在“items”对象中递增该按钮的 timesClicked 属性,然后将跨度的文本设置为该值。
var items = {
"Button A": {
timesClicked: 0
}
"Button B": {
timesClicked: 0
}
"Button C": {
timesClicked: 0
}
}
$('.itemButton').click(function () {
var itemName = $(this).text();
items.itemName.timesClicked++;
$(this).children(".itemCount") = items.itemName.timesClicked;
});
我已经阅读了一些关于跟踪按钮点击的其他问题,但没有找到任何可以准确解决这种情况的问题。我花了一段时间筛选 Jquery API 并尝试了很多不同的函数,所以我很可能采用了完全不正确的方法。感谢您提供的任何指导。
最佳答案
首先,您可以使用data
属性来更可靠地识别您的按钮:
<button class="itemButton" data-button="A">
Button A
<span class="itemCount">0</span>
</button>
<button class="itemButton" data-button="B">
Button B
<span class="itemCount">0</span>
</button>
<button class="itemButton" data-button="C">
Button C
<span class="itemCount">0</span>
</button>
然后您可以使用它来标识对象中的每个项目。请注意,在使用变量访问对象属性时需要使用数组索引表示法,而且您的对象语法也不正确。
var items = {
"A": { timesClicked: 0 },
"B": { timesClicked: 0 },
"C": { timesClicked: 0 }
}
$('.itemButton').click(function () {
var button = $(this).data('button');
items[button].timesClicked++;
$(this).children(".itemCount").text(items[button].timesClicked);
});
关于javascript - 编写一个函数来跟踪按钮点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23633651/