如何在JS中明确地使用它们的类/ Id编写单个函数?

Question

我有一个像下面这样的html，

<input class="btn btn-primary button1" type="button" value="0">
<input class="btn btn-primary button2" type="button" value="0">
<input class="btn btn-primary button3" type="button" value="0">
<input class="btn btn-primary button4" type="button" value="0">

可以有any number of buttons in the HTML

但是，尽管HTML中buttons的数量增加了，但我不能像下面这样每次都在JS中编写，

$(".button1").click(function() {
buttonVal(this);
});
$(".button2").click(function() {
buttonVal(this);
});
$(".button3").click(function() {
buttonVal(this);
});
...... for button 4 and so on....

//Single function
function buttonVal(ele)
{
var v = +$(ele).attr('value');
$(ele).attr('value', v > 2 ? 0 : v + 1);

}

每个按钮初始值为0。

每次点击按钮，数值增加1，当数值达到3时，在3后再次点击按钮。该值应该变为0。

相同的条件适用于所有新添加的按钮。

我需要一个single function，当添加时支持任何数量的按钮，而不是将每个按钮添加到JS中的单击事件，而不是通过显式调用它们的classes。

有人能帮帮我吗?

许多谢谢。

Answer 1

就像这样试试

$(".btn").click(function() {
buttonVal(this);
});
function buttonVal(ele)
{
var v = +$(ele).attr('value');
$(ele).attr('value', v > 2 ? 0 : v + 1);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="btn btn-primary button1" type="button" value="0">
<input class="btn btn-primary button2" type="button" value="0">
<input class="btn btn-primary button3" type="button" value="0">
<input class="btn btn-primary button4" type="button" value="0">

Answer 2

遍历按钮并为每个按钮添加事件侦听器

let btns = document.querySelectorAll(".btn")
btns.forEach(x => {
x.addEventLisetner("click", () => {
buttonVal(x);
})
})

这是纯js，所以这里不需要jquery

Answer 3

<input class="btn btn-primary button" type="button" value="0">
<input class="btn btn-primary button" type="button" value="0">
<input class="btn btn-primary button" type="button" value="0">
<input class="btn btn-primary button" type="button" value="0">
$(".button").click(function() {
buttonVal(this);
});
function buttonVal(ele)
{
var v = +$(ele).attr('value');
$(ele).attr('value', v > 2 ? 0 : v + 1);

}

你工作状态良好，但是你覆盖了代码。

Answer 4

您可以使用querySelectorAll和foreach循环来实现这一点。

const btn = document.querySelectorAll('.btn');
btn.forEach(button => {
button.addEventListener('click', function () {
button.value >= 3 ? button.value = 0 : button.value++;
})
});

<input class="btn btn-primary" type="button" value="0">
<input class="btn btn-primary" type="button" value="0">
<input class="btn btn-primary" type="button" value="0">
<input class="btn btn-primary" type="button" value="0">