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类访问span，在＆＃34; items＆＃34;中增加该按钮的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

Answer 2

如果要通过变量获取对象的属性，则应使用括号：

items[itemName].timesClicked

在您的情况下，您实际上正在寻找itemName变量items的属性。

Answer 3

演示：In Fiddler

首先，您错过了items - 变量中的逗号分隔符。此外，按钮中的文字是您输入的文字+点击次数（但items中的键 - 变量只是计数前的文字，所以items.itemText将始终未定义。最好的方法是添加ID按钮并将这些ID添加为items - 变量中的键。检查我的示例它非常简单，可以按照您的意愿工作。

HTML：

<button class="itemButton" id="btnA"> Button A <span class="itemCount"> 0 </span>     </button>
<button class="itemButton" id="btnB"> Button B <span class="itemCount"> 0 </span> </button>
<button class="itemButton" id="btnC"> Button C <span class="itemCount"> 0 </span> </button>

使用Javascript：

var items = {
 "btnA": {
    timesClicked: 0
 },
 "btnB": {
    timesClicked: 0
 },
 "btnC": {
     timesClicked: 0
 },
};

$('.itemButton').click(function () {
    var itemId = this.id;
    if(items[itemId] != undefined){
    items[itemId].timesClicked++;
    $(this).children(".itemCount").html(items[itemId].timesClicked);
    }
});

希望这对你有所帮助。

编写一个能够跟踪按钮点击的功能

3 个答案: