javascript - 编写一个函数来跟踪按钮点击

Question

我试图在按钮上显示用户点击该按钮的次数。我想在不为每个按钮编写单独的功能的情况下执行此操作，因为我计划有很多按钮。

<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 并尝试了很多不同的函数，所以我很可能采用了完全不正确的方法。感谢您提供的任何指导。

Answer 1

首先，您可以使用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);
});

Example fiddle