Javascript 用按钮绑定变量更有效的方法？

我有3个不同的按钮，当点击时，会将特定变量增加1。 有没有更有效的方法来代替在点击时写3个不同的内容？

---

我知道我可以使用数据属性将按钮与正确的元素绑定，但我不知道如何使用变量

var-x1=0；
var x2=0；
var x3=0；
$（'.btn1'）。在（'click'，function（）上{
x1+=1；
$（'#panel1'）.html（x1）；
});
$（'.btn2'）。在（'click'，function（）上{
x2+=1；
$（'#panel2'）.html（x2）；
});
$（'.btn3'）。在（'click'，function（）上{
x3+=1；
$（'#panel3'）.html（x3）；
});

0
0
0
#btn1
#btn2
#btn3
一如既往，使用函数对重复的代码进行抽象

function counter(buttonSelector, outputSelector) {
  var x = 0;
  $(buttonSelector).on('click', function() {
    x += 1;
    $(outputSelector).text(x); // btw, don't use `html`
  });
}
counter('.btn1', '#panel1');
counter('.btn2', '#panel2');
counter('.btn3', '#panel3');

您可以通过将这些调用（或只是函数体）放入循环中来进一步消除重复，和/或适当地调整选择器，但对于三个调用，这还不值得。
给它们相同的类，使其成为一键式侦听器，并在每个按钮上放置一个带有变量名和面板名的数据属性。类似这样，将所有变量放在一个对象中，这样您也可以访问它们如果它们是全局变量，您可以像此窗口一样访问它们[variableName]
您可以添加每个按钮HTML
onclick
事件并创建一个函数


函数添加（）{
this.innerHTML（parseInt（this.innerHTML（））+1）；
}
1
1.
1
我要么给你的按钮一个公共类，要么你可以把你的点击事件绑定到按钮元素，如果你没有其他需要担心的东西的话。然后使用所单击按钮的索引将其与要更改的div相匹配。基本上是一条直线：


$（'button'）。在（'click'，function（）上{
$（'div'）.eq（$（this.index（'button'））.html（+$（'div'））.eq（$（this.index（'button'））.text（）+1）；
});

0
0
0
#btn1
#btn2
#btn3
将计数存储在数据属性中，而不是存储在变量中


$（'button[data out]'）。在（'click'，function（）{//绑定每个按钮
//$（文档）。在（'单击，'按钮[data out]”上，函数（）{//或将事件委派与单击事件一起使用
var btn=$（this）//引用元素
var cnt=（btn.data（'count'）| | 0）+1//读取计数或默认为零并递增
btn.data（'count'，cnt）//更新计数数据属性
$（btn.data（'out'））.text（cnt）//更新文本输出
})；

0
0
0
#btn1
#btn2
#btn3
您可以使用数组而不是多变量。
现在为所有按钮指定一个特定的类，如btn。
然后：


将变量存储为对象的属性
在每个按钮上使用
data-*
属性来存储它是什么变量
应该是匹配的
将所有按钮绑定到一个处理程序
在处理程序中，检查单击按钮的
数据-
属性并
根据需要更新关联的对象属性


let variableObject={
x1:0，
x2:0，
x3:0
}
$（'.btn'）。在（'click'，function（）上{
variableObject[this.dataset.key]++；
$（“#panel”+this.dataset.key.charAt（1））.text（variableObject[this.dataset.key]）；
})；

0
0
0
#btn1
#btn2
#btn3
类似的东西


vars={
“x1”：0，
“x2”：0，
“x3”：0
}
$（'.btn'）。在（'click'，function（）上{
var vn=$（this.data（'varname'）；
var ps=$（this）.data（'panel-selector'）；
变量[vn]+=1；
$（ps）.text（vars[vn]）；
})

0
0
0
#btn1
#btn2
#btn3
使用id或任何属性和数组的方法：

var x = [];
    x[1] = 0;
    x[2] = 0;
    x[3] = 0;


$('.btn').on('click', function() {
  var pos = $(this).attr("id");
  x[+pos] += 1;
  $('#panel'+pos).html(x[pos]);
});

在HTML中：

<button class="btn" id="1">#btn1</button>
<button class="btn"  id="2">#btn2</button>
<button class="btn"  id="3">#btn3</button>

#btn1
#btn2
#btn3
这里有一个版本也会生成初始变量，因此它应该是可伸缩的


bindVars={}
$（'[data bind id]'）。每个（函数（）{
变量席=“x”+ $（this）。数据（“bID-ID”）；
var pi=“#panel”+$（this）.data（'bind-id'）；
bindVars[xi]=0；
$（此）。在（'单击'，函数（）上）{
bindVars[xi]+=1；
$（pi.text（bindVars[xi]）；
})
})

0
0
0
#btn1
#btn2
#btn3
data attributes绑定onclick to wrapper并使用e.target可能是什么？这一最佳选项在很大程度上取决于您计划如何使用变量和页面结构。您的最终目标可能值得扩展，以便我们提供相关建议。根据@epascarello:
$（“.btn”）。单击（function（）{$（This）.data（“x”，“This.”data（“x”）+1；}）；
或（更令人困惑的是，搜索许多重复项）
$（“.btn”）。单击（function（）{window[$（this.data（“varname”）]+=1；
with
bn1
如果我有数百次点击，我的最终目标是不会有数百次点击buttons@j08691问题是“我有3个不同的按钮”，但他也发表了评论“我的最终目标是，如果我有数百个按钮，就不会有数百次点击"，所以我假设这三个只是这个问题的一个代表性例子。@j08691啊，我没有读过。好吧，如果他有百分之一百的按钮，他希望也有一个适当的数据结构可以重复。我已经在我的答案中添加了一个句子，但没有更多细节，我不能推荐任何具体的内容一行'，是的，但我也需要相应的解密函数来理解它：）@MatusDubrava我已经添加了一些额外的信息来解释各个部分。如果我遗漏了什么，请告诉我。最干净的解决方案在我看来。@Mikey我认为只使用
div
元素的内容而不是在属性中重复它更干净。请参阅我的答案。@ScottMarcus，您每次都必须使用parseInt/Number（）解析它我希望像浏览器文本翻译器这样的东西不会弄脏内容。是的，对我来说，div本身的文本内容可以做到这一点，更容易使用数据属性。只是个人对“什么是最好的”的看法@如果
div
中的唯一内容是数字，则不需要将其转换为数字。您只需将其转换为数字，这在使用
++
时会隐式完成。请参阅下面的答案。如果您需要在任何地方使用结果，请
<button class="btn" id="1">#btn1</button>
<button class="btn"  id="2">#btn2</button>
<button class="btn"  id="3">#btn3</button>